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.

Sign up for GitHub

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

Jump to bottom

Warning: React does not recognize the iconPosition prop on a DOM element. (v10.8.3) #7219

Open
lekhnath opened this issue Sep 19, 2024 · 7 comments · May be fixed by #7447
Open

Warning: React does not recognize the iconPosition prop on a DOM element. (v10.8.3) #7219

lekhnath opened this issue Sep 19, 2024 · 7 comments · May be fixed by #7447
Labels
Type: Bug Issue contains a defect related to a specific component.

Comments

@lekhnath
Copy link

lekhnath commented Sep 19, 2024 •
edited
Loading

Describe the bug

React does not recognize the iconPosition prop on a DOM element when iconPosition prop in IconField is used with AutoComplete component.

Reproducer

https://stackblitz.com/edit/vitejs-vite-o12afk

System Information

react: 18.3.1
primereact: 10.8.3
typescript: 5.6.2

Steps to reproduce the behavior

  1. Go to issue reproducer link
  2. Inspect the console.

Expected behavior

AutoComplete and IconField are not composable. We should be able to combine any React component with any other component seamlessly.
@lekhnath lekhnath added the Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible label Sep 19, 2024
@melloware
Copy link
Member

Looks like the IconField just blindly puts the iconPosition on all child elements.

<div {...rootProps} ref={elementRef}>
                {Children.map(props.children, (child, index) =>
                    cloneElement(child, {
                        iconPosition: props.iconPosition
                    })
                )}
            </div>

@melloware melloware added Type: Bug Issue contains a defect related to a specific component. and removed Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible labels Sep 19, 2024
@Holgrabus
Copy link

To let you know, I used IconField without autocomplete and I also have the bug.
It was working in v10.8.0, but not in v10.8.3

@Lerwox
Copy link

Lerwox commented Oct 4, 2024

+1

@makushline
Copy link

+1 my team and I are encountering this bug as well. We were using v10.7.0 and updated to v10.8.3 and both versions have the issue, which makes me think it was not this commit 2bc9397 from @gcko.

If someone can provide some points on how to proceed I'm happy to take a stab at fixing the issue and opening a PR.

@melloware
Copy link
Member

Well as i stated the code is right here:

primereact/components/lib/iconfield/IconField.js

Lines 30 to 40 in 3dec07f

return (
<div {...rootProps} ref={elementRef}>
{Children.map(props.children, (child, index) =>
cloneElement(child, {
iconPosition: props.iconPosition
})
)}
</div>
);
})
);

Its blindly putting that field on ANY child not checking that its of a certain type.

@makushline
Copy link

@melloware I don't follow. We were also getting the error message while using v10.7.0, which was before the commit in August that introduced that code, which suggests that that snippet is not the culprit.

@melloware
Copy link
Member

That code is only in two places IconField and InputIcon so its coming from one of those two spots...

This was referenced Nov 23, 2024
Open
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Type: Bug Issue contains a defect related to a specific component.
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix(AutoComplete): resolve iconPosition props warning KumJungMin/primereact
5 participants
@makushline @lekhnath @melloware @Holgrabus @Lerwox