Slotted QSelect does not start on selected option

[BenJackGill]

What happened?

I have a long list of options in a slotted QSelect element.

One of those options has been pre-selected, but when then list opens it shows the very top of the options list, not the selected option.

If the list is closed and reopened it will then correctly show the selected option.

I could only get this bug to show when the QSelect was a slot of QInput. The bug does not happen when using QSelect on it's own.

Also this might be an old bug that as resurfaced because I found this very similar issue that was closed as resolved: #4394

What did you expect to happen?

The list should open scrolled to the currently selected option.

Reproduction URL

https://stackblitz.com/edit/quasarframework-yqsvxg?file=src/pages/IndexPage.vue

How to reproduce?

1. Go to the provided reproduction link
2. Click on the country select
3. See that the list is scrolled to the top, not the currently selected "County 112". This is the error.
4. Close the list and reopen it again. It will now be scrolled to the selected "County 112". This is how it should look the first time it is opened.

Flavour

Quasar CLI with Vite (@quasar/cli | @quasar/app-vite)

Areas

Components (quasar)

Platforms/Browsers

Chrome

Quasar info output

Operating System - Darwin(22.4.0) - darwin/arm64
NodeJs - 16.19.1

Global packages
  NPM - 8.19.3
  yarn - Not installed
  @quasar/cli - 2.0.1
  @quasar/icongenie - 2.5.4
  cordova - Not installed

Important local packages
  quasar - 2.11.10 -- Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time
  @quasar/app-vite - 1.2.2 -- Quasar Framework App CLI with Vite
  @quasar/extras - 1.16.3 -- Quasar Framework fonts, icons and animations
  eslint-plugin-quasar - Not installed
  vue - 3.2.47 -- The progressive JavaScript framework for building modern web UI.
  vue-router - 4.1.6
  pinia - Not installed
  vuex - Not installed
  vite - 2.9.15 -- Native-ESM powered web dev build tool
  eslint - 8.36.0 -- An AST-based pattern checker for JavaScript.
  electron - Not installed
  electron-packager - Not installed
  electron-builder - Not installed
  register-service-worker - 1.7.2 -- Script for registering service worker, with hooks
  @capacitor/core - Not installed
  @capacitor/cli - Not installed
  @capacitor/android - Not installed
  @capacitor/ios - Not installed

Quasar App Extensions
  *None installed*

Networking
  Host - BenBookAir.lan
  en0 - 192.168.8.149

Relevant log output

No response

Additional context

No response

[pdanpdan]

I can reproduce it - I'll take a look

[BenJackGill]

Upon further testing I think it has to do with the #option slot. It works ok if I remove that.

[BenJackGill]

It also seems that clicking one those options from the #option slot does not update the selected option. This is probably a related bug.

[pdanpdan]

Two things:

• :virtual-scroll-slice-size="countryOptions?.length" makes virtual scroll render all options all the time :) - why?
• countryOptionItemHeight starts as 0, so all heights are initially estimated as 0 height - provide a better initial estimation (and in no case 0)

But I would remove the resize observer - it is pointless

For tweaking the design take a look here: https://codepen.io/pdanpdan/pen/XWYWwZJ

[BenJackGill]

Thanks! That works!

I am more clear now about the use and purpose of virtual-scroll-item-size.

And for :virtual-scroll-slice-size="countryOptions?.length" I wanted all options to render at once so I could calculate the widest possible option width, and set that value to the options min-width. This is because I don't like the options menu shrinking and growing based on the values that are loaded or filtered. Is there a better way of doing this without hardcoding the width?

Cheers!