Iconfield : The iconfield component does not work when used in conjunction with the Password component

[nekorrrr]

Describe the bug

The iconfield component does not work when used in conjunction with the Password component

Reproducer

https://stackblitz.com/edit/iasvn4?file=src%2FApp.vue

PrimeVue version

4.0.0-beta.4

Vue version

3.x

Language

ES6

Build / Runtime

Vite

Browser(s)

EDGE@laster

Steps to reproduce the behavior

No response

Expected behavior

No response

[m-meier]

The problem seems to be that the IconField CSS expects the input element to be on the same level as the icon. However in case of the password component the input is wrapped in a div which causes invalid padding to be set and issues with z-index. This is only a problem for icon at the start of the field. An icon in the end of the input works.

As a workaround until this is fixed you could manually overwrite the styles (add z-index: 1 to the icon and the correct padding to the inputStyle) as seen here: https://stackblitz.com/edit/iasvn4-aczq3m?file=src%2FApp.vue

[nekorrrr]

The problem seems to be that the IconField CSS expects the input element to be on the same level as the icon. However in case of the password component the input is wrapped in a div which causes invalid padding to be set and issues with z-index. This is only a problem for icon at the start of the field. An icon in the end of the input works.

As a workaround until this is fixed you could manually overwrite the styles (add z-index: 1 to the icon and the correct padding to the inputStyle) as seen here: https://stackblitz.com/edit/iasvn4-aczq3m?file=src%2FApp.vue

Thank you for your answer. I will use this method until the final solution arrives.

[tugcekucukoglu]

Thanks for the solution. It seems the demo solves the problem.

[callumgare]

@tugcekucukoglu I believe this should be re-opened. The demo provides dirty hack to workaround the issue, a clever one but a workaround none the less. This should be fixed at the library level so people get confused why it doesn't work, google the issue, land here, then need to implement the workaround themselves.

This issue also appears to be closely related to multiple other issues involving the password component and icons:

• Password: Passthrough and IconField not working properly #5348
• Password: The Password component does not have an interval between the icon and the text when there is an icon. #6955
• Using FloatLabel within InputGroup and Using Password within IconField occur CSS Style error. #7047
• InputGroup: Style issue when use InputGroup with Password component #5333