I am trying to make a simple dropdown for selecting a U.S. state for an address and I’m running into a few UI issues. Some of these just might not be solvable, but any insight would be appreciated! This should be a common use case.
I am using the 2 letter state code for the value and for the label, I am using the code and full name in brackets like: AZ (Arizona) I am storing these options in an array of objects (with value/label) and setting them with the :options property. Easy so far.
I am listing more than the 50 states for full mailing address support. Every option from here: https://www.freeformatter.com/usa-state-list-html-select.html This means my longest label is “UM (United States Minor Outlying Islands”.
Annoyance 1: When I scroll down the options they seem to be loading from somewhere. When that happens, things jump around as the scrollbar lengthens. The biggest issue is the options area widens when I get to some of the longer labels (using Firefox on desktop). This happens even if I hardcode the options and don’t load from a variable, so it seems to be a core optimization. Is there a way to force load all the options at once?
I also don’t quite understand the logic for how/why the options widen as they seem to be able to wrap. Is this a browser set logic or is there a way to control the width of the displayed options? If I put the longest option first then the width problem goes away, but it would needs to be in the first 5 or so options.
Annoyance 2: If I have a state like MA selected and I click the dropdown, it opens the options at the top, not jumping to MA. Is this related to using emit-value? Is there a way to jump to the selected option?
Annoyance 3: In a normal HTML dropdown I can type a character to jump to a state or cycle through them. For example: https://codepen.io/carlnunes/pen/yhiEo Click the dropdown then type ‘M’ to jump to Maine. Hit M again to go to the next ‘M’ state in the list. This doesn’t work on q-select. I imagine I can replicate it using a filter/autocomplete function, but that seems like overkill.
Thanks for any insight.