QInput label always floats on required number input

[Logima]

What happened?

When using QInput with type="number" and required, the label is always floated, even when the input has no value.

What did you expect to happen?

The label to look similar to other inputs without value.

Reproduction URL

https://codepen.io/logima/pen/bGvVWgM

How to reproduce?

1. Go to the provided reproduction link.
2. See that the label is floating even when the input has no value.

Flavour

Vue CLI Plugin (vue-cli-plugin-quasar)

Areas

Components (quasar), Style & Identity (quasar)

Platforms/Browsers

Chrome

Quasar info output

No response

Relevant log output

No response

Additional context

#4371 might be where this issue started. Tehcnically this works correctly: empty required number input is invalid, so the label is floated. In this case though this behavior is unwanted, as it makes the input's initial state look different than other empty inputs. Removing the required-attribute fixes label position, but also removes native required-validation.

I'm using Quasar 1.19.4, but the same applies to latest v2 (2.7.5). v2 reproduction link: https://codepen.io/logima/pen/KKodqNw

[MilosPaunovic]

required is HTML property; so it's probably why it giving you trouble. You could bypass it by using Quasar validation instead :rules="[val => !!val || 'Field is required']".

https://codepen.io/milospaunovic/pen/jOzbwab

[pdanpdan]

It's because of this:

.q-field__input[type=number]:invalid+.q-field__label, .q-field__native[type=number]:invalid+.q-field__label {
  transform: translateY(-40%) scale(0.75);
}

Which is there because firefox shows the spinner arrows :(

You can override that rule in your stylesheet

I'll have to check if we can fix it for firefox with some specific targeting

[Logima]

required is HTML property; so it's probably why it giving you trouble. You could bypass it by using Quasar validation instead :rules="[val => !!val || 'Field is required']".

https://codepen.io/milospaunovic/pen/jOzbwab

Yes, that is a viable workaround, but it would be nice if also the native validation could be used.

I'll have to check if we can fix it for firefox with some specific targeting

Thanks, that would be great.

[rstoenescu]

Fix will be available in Quasar v2.11.8 and v1.22.7