search

alphagov / accessible-autocomplete

An autocomplete component, built to be accessible.
https://alphagov.github.io/accessible-autocomplete/examples/
MIT License
911 stars 149 forks source link

flash of unstyled content when enhancing a select #153

Open joelanman opened 7 years ago

joelanman commented 7 years ago

Just wondering if theres a good, accessible approach to preventing a flash of unstyled content when enhancing a select input? The dropdown appears on the page while loading, and is then replaced by the autocomplete.

tvararu commented 7 years ago

@joelanman yes, I'm sad I haven't had the time to demonstrate this yet!

The solution is to inline a small <style> block in the <head> that restyles the select dropdown to look like an input, but only if JavaScript is enabled. Most applications already have some form of .js-enabled class precisely for stuff like this.

@nickcolley may have already built this in a prototype or can provide more insight.