Missing PT Option for IconField in Password

[sja-cslab]

Describe the bug

Relates to #6349 - fixed by @melloware in #6493.
The point here is that I'm using <Password> within display: flex, and I'm no longer able to let the input grow. The reason is that there is no PT option within <Password> to give any className down to IconField.

The relevant code can be found in password

Reproducer

https://primereact.org/password/#togglemask

PrimeReact version

10.6.4

React version

18.x

Language

ALL

Build / Runtime

Vite

Browser(s)

No response

Steps to reproduce the behavior

No response

Expected behavior

No response

[KirilCycle]

Hi there! Can I take it? I want to clarify something, when updating PT options for password, I also need to update password PT options in PASS THROUGH tab in documentation?

[melloware]

The docs automatically update from the .d.ts changes

[nitrogenous]

Hi there! Can I take it? I want to clarify something, when updating PT options for password, I also need to update password PT options in PASS THROUGH tab in documentation?

Of course!

[nitrogenous]

@KirilCycle Can you give me an estimated time for this task? I was planning to release a new version for some of the bugs today

[KirilCycle]

@KirilCycle Can you give me an estimated time for this task? I was planning to release a new version for some of the bugs today

Well, ill try to push the PR within 3 hours+-

[melloware]

Nice teamwork @KirilCycle !

[sja-cslab]

Thanks, @KirilCycle. I've just updated to 10.6.5, and the pt option is indeed available now. However, className does not get rendered.

e.g. the following:

pt={{
        input: { className: "flex-1" },
        iconField: { className: "flex-1" }
   }}

Resulting in:

[melloware]

@sja-cslab because it's an InputText you have to do "input: { root: { className: "test" } }"

[sja-cslab]

@melloware if you are talking about someting like

pt={{
        input: { root: { className: "qwertz" } },
        iconField: { className: "flex-1" }
   }}

that does not help and not even work (in case this nesting is even possible) - however, I'm not interested in the InputText.
The div.p-icon-field is the parent I need to add a class to, that was my intention with this issue here

[sja-cslab]

@melloware here's a stackblitz so you may understand my intention

[melloware]

Did you try iconField with "root" it's the same principal as input.

[sja-cslab]

@melloware good hint, that's working - stackblitz updated. Ty.

pt={{ input: { className: 'flex-1' }, iconField: { root: { className: 'flex flex-1' }, }, }}

[melloware]

Ok great! It's whenever you are passing through to another subcompnent of a component like IconField or InputText it needs to be root.

[sja-cslab]

pt={{
    input: { className: "flex-1" },
    iconField: {
        root: { className: 'flex flex-1' },
    }
}}

works if the parent of that password is display: flex and allows growing. So if you use Floating labels, you password got nested one more level i think so you need to pass flex to this

[ezescigo]

Have you noticed the icon weirdly positioned?

[sja-cslab]

Update your theme that's how it should look in 10.7

If you need more help please join Discord and try to find it there