Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Password: iconField pt not passing through #6776

Closed
dh4bu opened this issue Jun 20, 2024 · 8 comments · Fixed by #7249
Closed

Password: iconField pt not passing through #6776

dh4bu opened this issue Jun 20, 2024 · 8 comments · Fixed by #7249
Assignees
Labels
Component: Unstyled Issue related to unstyled/passthrough attributes good first issue *** Welcome to PrimeReact Family! *** Good issue!
Milestone

Comments

@dh4bu
Copy link

dh4bu commented Jun 20, 2024

Describe the bug

Attributes to IconField via pt do not apply.

Reproducer

https://stackblitz.com/edit/anf38x?file=src%2FApp.jsx

PrimeReact version

10.6.6

React version

18.x

Language

TypeScript

Build / Runtime

Create React App (CRA)

Browser(s)

No response

Steps to reproduce the behavior

No response

Expected behavior

I expect the attribute i pass through to be applied

@dh4bu dh4bu added the Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible label Jun 20, 2024
@melloware melloware added good first issue *** Welcome to PrimeReact Family! *** Good issue! Component: Unstyled Issue related to unstyled/passthrough attributes and removed Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible labels Jun 20, 2024
@Mohamedemad4
Copy link

Any updates on this?

Looking at the code, I can't really figure out how can I start understanding/debugging this.

If anyone can guide me I would be happy to submit a PR fix.

Thanks.

@melloware
Copy link
Member

I didn't take a deep look at this but maybe studying a component it does work for like InputText and trying to figure out what is different with Password ?

@Mohamedemad4
Copy link

The InputText component doesn't use icon field. And as far as I can tell. they both use the same passthrough mechanism of passing pt options using pt={ptm('iconField')} the ptm function.

I think I will add some console.logs and try again.

if you have any hints/things I can look at it please do tell.

@melloware
Copy link
Member

luckily you can run npm run dev on the project and it runs the showcase live and you can debug and make changes to components to see what is going on.

Mohamedemad4 added a commit to Mohamedemad4/primereact that referenced this issue Sep 25, 2024
gcko added a commit to gcko/primereact that referenced this issue Sep 25, 2024
Ensure `InputIcon` can be styled when in unstyled mode
@gcko gcko mentioned this issue Sep 25, 2024
@gcko
Copy link
Contributor

gcko commented Sep 25, 2024

Hey @Mohamedemad4 @melloware

Please check out the attached stackBlitz -> https://stackblitz.com/edit/5npj6y?file=src%2FApp.jsx

tl;dr iconField does respect styles and you can style the component, however inputIcon does not respect styles and cannot be styled. I have created a pr that adds the ability to style inputIcon

@Mohamedemad4
Copy link

I opened the stackblitz you linked and tried my original use case which I mentioned in #7236. Basically left aligning the icon by adding the p-icon-field-left to the iconField. It unfortunately didn't work. Maybe the iconField respects styles but adding p-icon-field-left didn't yield the result I expect it to. Which I am not exactly clear on why that's the case?
Could you perhaps offer an explanation? I should mention that it does work in #7248.

If I understand correctly it's the iconField which enforces the alignment of the icon and not the inputIcon itself.
is that correct?
thanks.

@gcko
Copy link
Contributor

gcko commented Sep 25, 2024 via email

@melloware melloware added this to the 10.8.4 milestone Sep 25, 2024
@Mohamedemad4
Copy link

Hey @gcko would you kindly point me to a demonstration with a left aligned icon?
I am still unable to figure this one out I am afraid.

thank you

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Component: Unstyled Issue related to unstyled/passthrough attributes good first issue *** Welcome to PrimeReact Family! *** Good issue!
Projects
None yet
4 participants