Password: Passthrough and IconField not working properly

[luke-z]

Describe the bug

Problem 1) When using the IconField component together with the Password component, the InputIcon is hidden behind the component. Using a higher z-index can solve this. However, the Password component then lacks the appropriate left padding as can be seen in the reproduction with InputText.

This leads to problem 2) I tried to add a padding by using the passthrough property on the Password component, however, adding a class to the input passthrough doesn't seem to work.

Reproducer

https://stackblitz.com/edit/primevue-nuxt-issue-template-porwul

PrimeVue version

3.49.1

Vue version

3.x

Language

TypeScript

Build / Runtime

Nuxt

Browser(s)

Brave

Steps to reproduce the behavior

1. Add an IconField with an InputIcon and a Password
2. See that the icon is not visible
3. Add z-index to icon
4. See that the input doesn't get a padding

Expected behavior

The Password component should behave just like the InputText component when using it together with an IconField component.

[nekorrrr]

I'm having the same problem.

[tjbrains]

same issue in 4.0.0 rc2:

<IconField>
   <InputIcon class="pi pi-lock"/>
   <Password placeholder="Password...."></Password>
</IconField>

The icon is invisible.

Maybe it's a feature not a bug.

[sceee]

Side note for v4.0.0-rc.3: The passthrough to access the input of a Password needs to be this: pt:pc-input:root:class="someclass".

Reason: The pc-input is the key for the "input" part of the Password component which is an InputText - and for the InputText you need to use the root key to passthrough to the actual input (see InputText passthrough in the docs).