Search bar preview closes when link on it is clicked on-CodePudding

I have a search bar that shows a preview list of user links with usernames similar to the search text input (similar to youtube, instagram, facebook search bars). This preview is opened only when the search bar is focused.

.search-results {
  visibility: hidden;
}

#search-bar:focus   .search-results {
  visibility: visible;
}

My problem is that when one of these links is clicked on, the browser does not take me to that page because the focus is now outside the search box and the search results are back hidden. Is there a way to prevent the hiding from happening after one of the links is clicked on? Thanks!!

CodePudding user response：

Use focus-within on a wrapping parent element of both the input and the popup. Assuming that the link they are clicking on is also tabindex="0" or otherwise focusable this should keep it visible once the link is clicked.

.search-results {
  visibility: hidden;
}

.parent:focus-within .search-results {
  visibility: visible;
}