primevue
primevue copied to clipboard
Password Component not working on v3.52.0
Describe the bug
Cannot type 'password' on input field of Password Component.
"nuxt": "^3.9.0", "nuxt-primevue": "^0.3.1", "primevue": "^3.52.0"
Reproducer
PrimeVue version
3.52.0
Vue version
3.x
Language
ES6
Build / Runtime
Nuxt
Browser(s)
Firefox, Chrome
Steps to reproduce the behavior
import Password from 'primevue/password';
const passwordx = ref();
<Password v-model="passwordx" inputId="password" inputClass="w-full" />
// ! ------------------------------------------------------------------------------------------------------
nuxt.config.ts export default defineNuxtConfig({ modules: [ '@nuxtjs/supabase', '@nuxtjs/tailwindcss', 'nuxt-primevue', '@nuxt/image' ], supabase: { redirect: false }, primevue: { components: { include: '*' }, options: { ripple: true } }, css: [ 'assets/css/tailwind.css', 'assets/css/base.css', 'primevue/resources/themes/aura-light-amber/theme.css', 'primevue/resources/primevue.min.css', 'primeicons/primeicons.css' ], devtools: { enabled: true } });
Expected behavior
No response
We're unable to replicate your issue, if you are able to create a reproducer or add details please edit this issue. This issue will be closed if no activities in 20 days.
Same Problem here. Before i have used PrimeVue with version 3.41. Now it is not working after update.
When using v-model you are not able to type anything. If you are using modelValue and @update:modelValue, you can type the password, but it dissappears immediately when clicking outside the input field.
Using @change and logging the $event shows that even the inneHtml is empty, and target.value also.
My band aid solution?:
<Password @update:modelValue="($event) => form.sign_in.password = $event" :feedback="false" />
Not using v-model. Two-way binding not working I think. And if I allow feedback to True, it 'erases' the password value..
Ditched Password component, my alternative:
const form = reactive({ sign_in: { password: null }, show_password: false });
<InputGroup> <InputText v-if="!form.show_password" v-model="form.sign_in.password" type="password" /> <InputText v-else v-model="form.sign_in.password" type="text" /> <InputGroupAddon @click="form.show_password = !form.show_password" class="cursor-pointer"> <i :class="!form.show_password ? 'pi pi-eye-slash' : 'pi pi-eye'" /> </InputGroupAddon> </InputGroup>
Had to make two separate InputText component for :type="!form.show_password ? 'password' : 'text'" not working.