QSelect text is not vertically centered

[hawkeye64]

What happened?

The text within a QSelect is not vertically centered.

What did you expect to happen?

The text is to be vertically centered.

Reproduction URL

https://codepen.io/Hawkeye64/pen/abLPVmL

How to reproduce?

1. Go to CodePen link
2. Look at the QSelect

Flavour

Quasar CLI (@quasar/cli | @quasar/app)

Areas

Components (quasar)

Platforms/Browsers

Firefox, Chrome

Quasar info output

$ quasar info

Operating System - Linux(5.4.0-94-generic) - linux/x64
NodeJs - 16.13.0

Global packages
  NPM - 8.1.0
  yarn - 1.22.17
  @quasar/cli - 1.2.2
  @quasar/icongenie - Not installed
  cordova - Not installed

Important local packages
  quasar - 1.17.4 -- Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time
  @quasar/app - 2.2.10 -- Quasar Framework local CLI
  @quasar/extras - 1.12.2 -- Quasar Framework fonts, icons and animations
  eslint-plugin-quasar - 1.0.0 -- Official ESLint plugin for Quasar
  vue - 2.6.14 -- Reactive, component-oriented view layer for modern web interfaces.
  vue-router - 3.5.1 -- Official router for Vue.js 2
  vuex - 3.6.2 -- state management for Vue.js
  electron - Not installed
  electron-packager - Not installed
  electron-builder - Not installed
  @babel/core - 7.16.0 -- Babel compiler core.
  webpack - 4.44.2 -- Packs CommonJs/AMD modules for the browser. Allows to split your codebase into multiple bundles, which can be loaded on demand. Support loaders to preprocess files, i.e. json, jsx, es7, css, less, ... and your custom stuff.
  webpack-dev-server - 3.11.2 -- Serves a webpack app. Updates the browser on changes.
  workbox-webpack-plugin - Not installed
  register-service-worker - 1.7.2 -- Script for registering service worker, with hooks
  typescript - 4.2.2 -- TypeScript is a language for application scale JavaScript development
  @capacitor/core - Not installed
  @capacitor/cli - Not installed
  @capacitor/android - Not installed
  @capacitor/ios - Not installed

Quasar App Extensions
  @quasar/quasar-app-extension-qmediaplayer - 1.4.1 -- A Quasar App Extension for @quasar/quasar-ui-qmediaplayer

Networking
  Host - jeff-ubuntu2
  enp0s31f6 - 192.168.0.20
  wg0 - 172.16.0.23

Relevant log output

No response

Additional context

There is a <div> containing these classes: "q-field__native row items-center"
Inside this <div> is a <span>, containing the text, and another <div>, containing "role" and a lot of "aria-*" attributes.
The second <div> is 0x0 in width/height, but the flex doesn't care about that, so it appears it is splitting into two partitions and the second one is wrapping.

1. If in dev tools, I add the "absolute" class to the inner <div>, then everything works out.
2. If I add class "hidden" inner <div>, then everything works out.
3. If I add class="no-wrap" to the QSelect nothing happens.
4. Or, if I add "no-wrap" to the "q-field__native row items-center", then it works out (but, I think QSelect is supposed to allow wrapping).
5. If I add to QSelect class="q-select--nowrap" and target CSS with this:

.q-select--nowrap .q-field__native.row {
  flex-wrap: nowrap
}

It works but seems to be a bit tedious.

To verify it wasn't the QMarkupTable interfering in some way, here is another CodePen without it showing the same issue: https://codepen.io/Hawkeye64/pen/BawvJWp?editors=1010

[rstoenescu]

Fix will be available in Quasar v2.4.10 & v1.17.5