[Q-Select] use-input & hide-dropdown-icon leads to jumping width when loading

[KammererTob]

What happened?

Using QSelect with use-input and hide-dropdown-icon makes the input width jump when the loading spinner shows.

What did you expect to happen?

The input width to not change.

Reproduction URL

https://jsfiddle.net/2jqn579y/22/

How to reproduce?

1. Go to the link
2. Focus the select/input
3. Spinner shows and increases the input width
4. When its finished loading the width decreases again.

Flavour

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

Areas

Components (quasar)

Platforms/Browsers

Firefox

Quasar info output

Operating System - Windows_NT(10.0.19045) - win32/x64
NodeJs - 20.11.1

Global packages
  NPM - 10.2.4
  yarn - 1.22.19
  pnpm - 9.4.0
  bun - Not installed
  @quasar/cli - undefined
  @quasar/icongenie - Not installed
  cordova - Not installed

Important local packages
  quasar - 2.16.6 -- Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time
  @quasar/app-vite - 2.0.0-beta.15 -- Quasar Framework App CLI with Vite
  @quasar/extras - 1.16.12 -- Quasar Framework fonts, icons and animations
  eslint-plugin-quasar - Not installed
  vue - 3.4.31 -- The progressive JavaScript framework for building modern web UI.
  vue-router - 4.4.0
  pinia - Not installed
  vuex - Not installed
  vite - 5.3.3 -- Native-ESM powered web dev build tool
  vite-plugin-checker - Not installed
  eslint - 9.6.0 -- An AST-based pattern checker for JavaScript.
  esbuild - 0.23.0 -- An extremely fast JavaScript and CSS bundler and minifier.
  typescript - 5.5.3 -- TypeScript is a language for application scale JavaScript development
  workbox-build - Not installed
  register-service-worker - Not installed
  electron - Not installed
  electron-packager - Not installed
  @electron/packager - Not installed
  electron-builder - Not installed
  @capacitor/core - Not installed
  @capacitor/cli - Not installed
  @capacitor/android - Not installed
  @capacitor/ios - Not installed

Quasar App Extensions
  *None installed*

Relevant log output

No response

Additional context

No response

[Dtsiantaris]

From the source code here you can see that the dropdown icon gets rendered when loading is not true, among other conditions.

So basically the dropdown-icon and the spinner from the loading state of the field are never going to render at the same time. But they take up the same space(as the error icon and generally the inner append part of the q-field so this 'jumping around' does not occur).

Now in your case you hide the dropdown icon so the extra same-width space(that would be for both loading spinner and dropdown icon) is not initially rendered. This makes the input to grow when the loading happens and the spinner renders.

You could force the .q-field-append content to be absolute/fixed so they don't take up actual space and force the input to grow.
Of course in order to do that you would have to also do this input-style="position: relative;" or atleast something that has a relative position.

Like this.

Hope this helps