primevue icon indicating copy to clipboard operation
primevue copied to clipboard

Password Component not working on v3.52.0

Open angelxtrme opened this issue 9 months ago • 2 comments

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

angelxtrme avatar Apr 29 '24 03:04 angelxtrme

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.

github-actions[bot] avatar Apr 30 '24 05:04 github-actions[bot]

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.

apmyp1990 avatar May 17 '24 11:05 apmyp1990

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..

angelxtrme avatar Jun 11 '24 02:06 angelxtrme

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.

angelxtrme avatar Jun 11 '24 04:06 angelxtrme