Q-select weirdness with more options
-
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.
-
Try making a codepen with the data and code you are using to demonstrate your annoyances and I’m sure we can work on resolving them.
You can use one of the examples closest to what you are trying to accomplish from here: https://quasar.dev/vue-components/selectScott
-
Good point, here’s a Codepen: https://codepen.io/jyagmin/pen/PrZLLw
-
Ok. Here are my attempts. https://codepen.io/smolinari/pen/qzbeOg
The only thing I couldn’t get to work was your annoyance #2. I think that might be worth an improvement suggestion. Maybe?
Scott
-
Very nice! “Popup-content-style” is a new one for me, glad to learn of it.
I was a little surprised that the q-select doesn’t start at the current selection, It might be kind of minor, but I can see it being an issue in some situations (especially on mobile, if it persists there). So I will add it as a suggestion. Thanks for your help, Scott.
Jim
-
should be requested yep, just tested and it does not scroll to the current selected value.
