search

projectblacklight / blacklight

Blacklight provides a discovery interface for any Solr (http://lucene.apache.org/solr) index.
http://projectblacklight.org/
Other
757 stars 255 forks source link

Hide search bar component #autocomplete-popup element in html #3161

Closed elohanlon closed 1 month ago

elohanlon commented 1 month ago

Hello,

While using Arclight, my team noticed that the Blacklight search bar component's #autocomplete-popup element is visible for a fraction of a second before the @github/auto-complete-element js kicks in to hide it (via hidden attribute). Once you do a search with auto-complete enabled, the hidden attribute is removed, and then it's added again when it's time for the #autocomplete-popup box to close.

I'm submitting this PR to propose adding the hidden attribute to the #autocomplete-popup html by default, to avoid the flash of unstyled content.

You can see the issue I'm describing if you go to the Arclight demo page (https://arclight-demo.projectblacklight.org) and click your browser refresh button a bunch of times in a row. An empty white box appears below the "Search..." placeholder text in the input. I'll also attach a video below:

https://github.com/projectblacklight/blacklight/assets/1017323/7ce7f4a3-f575-44a1-94cb-b4250c9d57b4

Best, Eric

marlo-longley commented 1 month ago

Looks good, thanks for doing this!

elohanlon commented 1 month ago

Glad to! And thank you for merging it!