QInput/QSelect: placeholder visible behind label when field is empty (v2.19.0)

[JoseGoncalves]

Description

After upgrading from Quasar 2.18.x to 2.19.0, input placeholders are visible behind the floating label when the field is empty (i.e., the label hasn't floated up yet). This causes placeholder text to overlap with the label text.

Expected behavior

Placeholders should be hidden when the label is in its default (non-floated) position, as they were in 2.18.x.

Actual behavior

Placeholders show through behind the label text when the field is empty and unfocused.

Root cause analysis

The CSS rule that hides the placeholder already exists in the Quasar source (QField.sass):

.q-field--labeled:not(.q-field--float) .q-field__native::placeholder,
.q-field--labeled:not(.q-field--float) .q-field__input::placeholder {
  color: transparent;
}

However, v2.19.0 switched the internal build from cssnano to lightningcss, which likely changed the output ordering or specificity of this rule, causing it to be overridden.

Workaround

Adding the following to global CSS resolves the issue:

.q-field--labeled:not(.q-field--float) .q-field__native::placeholder,
.q-field--labeled:not(.q-field--float) .q-field__input::placeholder {
  color: transparent !important;
}

Versions

• Quasar: 2.19.0
• @quasar/app-vite: 2.5.4
• Browser: Chrome 134, Firefox 136
• OS: Linux

[rstoenescu]

Hi,

Thanks for reporting! Fixed in v2.19.1 (and released it).