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/select

    Scott



  • 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.


Log in to reply