Input type password. has password plain text in the html value=""

[NHenzen]

What happened?

I have a password input field. When I type something into this field, it displays asterisks in the field itself.
However, if I inspect the input using developer tools, I can see the value in plain text.

However is i do this on the quasar.dev site i dont have this behavior
https://quasar.dev/vue-components/input#example--input-types

It seems this behavior is not in Vue or a plain HTML password field.

What did you expect to happen?

That the password is not shown in the html

Reproduction URL

https://codepen.io/nick-henzen/pen/PwqrwwK

How to reproduce?

1. Open codepen link
2. type something into the password field like "password-input"
3. inspect the field and find the input -> value is visable

Example:
<input class="q-field__native q-placeholder" tabindex="0" id="id0" type="password" value="password-input">

Flavour

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

Areas

Components (quasar)

Platforms/Browsers

Chrome, Microsoft Edge, Firefox

[yusufkandemir]

The docs use Vue 3.4.20. Here's the version of the same CodePen that runs on that version: https://codepen.io/yusufkandemir/pen/pvJXJeg
So, this must have gotten changed in Vue somewhere in between.

The relevant piece of code:

quasar/ui/src/components/input/QInput.js

Lines 139 to 146 in 0ae061a

	// some browsers lose the native input value
	// so we need to reattach it dynamically
	// (like type="password" <-> type="text"; see #12078)
	watch(() => props.type, () => {
	if (inputRef.value) {
	inputRef.value.value = props.modelValue
	}
	})

[joepvdstaaij]

The docs use Vue 3.4.20. Here's the version of the same CodePen that runs on that version: https://codepen.io/yusufkandemir/pen/pvJXJeg So, this must have gotten changed in Vue somewhere in between.

The relevant piece of code:

quasar/ui/src/components/input/QInput.js

Lines 139 to 146 in 0ae061a

// some browsers lose the native input value
// so we need to reattach it dynamically
// (like type="password" <-> type="text"; see #12078)
watch(() => props.type, () => {
if (inputRef.value) {
inputRef.value.value = props.modelValue
}
})

We noticed that bit of code too, but it has been there for 3 years. Strange that it would suddenly cause issues in a newer Vue version, when it doesn't seem to do anything particularly interesting. The issue isn't even dependant on toggling the 'type' prop, which you would expect going by that Watcher. 🕵️

[zanzara]

So even using the latest Vue Version would lead to the same behaviour with Quasar v2.18.1 ?
(We need a fix in Quasar, if i understood it right ?!)

Btw.: Vue 3.4.20 is 1.5 yr old now. There have been lot's of Vue versions since then released.
On first sight of their change-log I cannot find something concerning that above.

[yusufkandemir]

To clarify, it's not a "Quasar-thing". If you use render functions and do h('input', { type: 'password', value: 'test' }), you will see the same behavior. Here's a Vue SFC Playground showing it.

The same behavior can be seen in Vuetify, for example:
https://vuetifyjs.com/en/components/text-fields/#password-input

I tested different versions and found out it started happening in Vue 3.4.28:
https://github.com/vuejs/core/blob/main/changelogs/CHANGELOG-3.4.md#3428-2024-06-14

Here's the relevant commit:
vuejs/core@537a571

I couldn't find a reported issue in the Vue repo. We can't fix or work around it at the framework level. So, there is nothing we can do. You can create an issue in the Vue report if you are interested. If they make a release, you can update your Vue version to get the behavior, without waiting for Quasar to do anything.

[zanzara]

Ty.
So I'm wondering a bit, that there isn't yet an issue reported in the Vue repo.
Cannot imagine the NHenzen above was the first.

[NHenzen]

@yusufkandemir en @zanzara thank you for your help.
I created a Vuejs issue

vuejs/core#13641