quasarframework
Setting `white-space` css on QSelect isn't applied to nested span (possible regression since 2.18.1)
What happened?
I noticed a possible regression in one of my apps. I had some QSelects where the value labels would contain newline characters (\n). While I need a slot for the options in the dropdown menu, for the representation of the actually selected value I could just set the css white-space: pre-wrap on the QSelect. This would cause the css property
white-space-collapse: preserve to be set on all the nested elements.
What did you expect to happen?
Before (<= 2.18.0), setting white-space: pre-wrap (or any other value for that matter) would work and cause the selected value in the QSelect, if it contained \n characters, to render these as newlines, as white-space-collapse: preserve would be set on all elements including the relevant span.
Since 2.18.1, this behavior stopped working: most of the nested elements still have white-space-collapse: preserve, except the related span, which as white-space-collapse: collapse set.
Reproduction URL
https://jsfiddle.net/kLdf7qv5/22/
How to reproduce?
- Go to the reproduction URL
- Observe how the various inputs render differently
Note that switching Quasar versions (not possible afaik on jsfiddle) would show it works on quasar <= 2.18.0
Flavour
Quasar CLI with Vite (@quasar/cli | @quasar/app-vite)
Areas
Components (quasar)
Platforms/Browsers
Chrome
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.22
pnpm - 9.14.2
bun - Not installed
@quasar/cli - 2.4.1
@quasar/icongenie - Not installed
cordova - Not installed
Important local packages
quasar - 2.18.0 -- Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time
@quasar/app-vite - 2.2.0 -- Quasar Framework App CLI with Vite
@quasar/extras - 1.16.17 -- Quasar Framework fonts, icons and animations
eslint-plugin-quasar - Not installed
vue - 3.5.13 -- The progressive JavaScript framework for building modern web UI.
vue-router - 4.5.0
pinia - 3.0.2 -- Intuitive, type safe and flexible Store for Vue
vite - 5.4.18 -- Native-ESM powered web dev build tool
vite-plugin-checker - Not installed
eslint - 9.24.0 -- An AST-based pattern checker for JavaScript.
esbuild - 0.25.0 -- An extremely fast JavaScript and CSS bundler and minifier.
typescript - 5.8.3 -- TypeScript is a language for application scale JavaScript development
workbox-build - 7.3.0 -- A module that integrates into your build process, helping you generate a manifest of local files that workbox-sw should precache.
register-service-worker - 1.7.2 -- Script for registering service worker, with hooks
electron - 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
@quasar/quasar-app-extension-testing-unit-vitest - 1.1.0 -- A Quasar App Extension for running tests with Vitest
Networking
Host - G3H16G3
vEthernet (Default Switch) - 172.26.80.1
Wi-Fi - 10.14.12.4
Relevant log output
Additional context
I am however not sure if this was ever supported in the first place. It seems the passing of the properties down to the span is intentional, but I could be wrong. I just wanted to flag it: if it is unintentional, you might want to decide what to do with this. If it was intentional, good to know and I'll double-check my projects.
Given the version number it happened in (2.18.1) and the release notes, I would suspect the "regression" to have been caused by changes for https://github.com/quasarframework/quasar/issues/17875
fixed列其实由两个table组合成，很有可能是因为vm.$refs没有拿到真正展示的ref，要通过dom一层层找到真实展示那个popover
我打印过$refs拿到的el-popover实例对象，就是当前显示的目标实例，获取实例这一步并没有问题。我还单独用这个实例在Console控制台直接手动执行doClose()方法，结果也是不生效。
fixed列其实由两个table组合成，很有可能是因为vm.$refs没有拿到真正展示的ref，要通过dom一层层找到真实展示那个popover
我打印过$refs拿到的el-popover实例对象，就是当前显示的目标实例，获取实例这一步并没有问题。我还单独用这个实例在Console控制台直接手动执行doClose()方法，结果也是不生效。
@LSL1618 说的没问题，由于加了fixed属性，打开调试工具能看到有两个el-table，一个是页面中显示出来的，另一个是隐藏的，你在作用域插槽中加的ref，绑定到了隐藏的那个表格中，所以无效，如果要调用el-popper的实例方法，目前看来无解。找到解决办法了通知我。。。
