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

[BUG] Warning: Prop id did not match. Server: #260

Closed
2 of 6 tasks
Kolby-Udacity opened this issue May 13, 2023 · 2 comments · Fixed by #298
Closed
2 of 6 tasks

[BUG] Warning: Prop id did not match. Server: #260

Kolby-Udacity opened this issue May 13, 2023 · 2 comments · Fixed by #298
Assignees
Labels
Bug Something isn't working

Comments

@Kolby-Udacity
Copy link

Description

Using the latest verion of Chakra: 2.5.3
And the latest version of chakra-react-select: 4.6.0

The warning Warning: Prop id did not match. Server: "react-select-chakra-react-select-1-input" Client: "chakra-react-select-demo" Appears in the console.

chakra-react-select Version

4.6.0

Link to Reproduction

https://codesandbox.io/s/laughing-turing-9089o6

TypeScript?

  • Yes I use TypeScript

Steps to reproduce

  1. Go to https://codesandbox.io/s/laughing-turing-9089o6
  2. Look in console

Operating System

  • macOS
  • Windows
  • Linux
  • iOS/iPadOS
  • Android

Additional Information

No response

@Kolby-Udacity Kolby-Udacity added the Bug Something isn't working label May 13, 2023
@csandman
Copy link
Owner

This is more of an issue with how the underlying react select works I believe. From what I can tell, adding an instanceId to your select component means it will generate an id for the underlying input element based on that. It looks like it's doing something like this:

`react-select-${instanceId}-input`

Which is then getting overridden by the id set on the form control after first render. This is fixed easily enough by manually adding the inputId prop to your select, matching it to the id you have on your form control.

<FormControl id="chakra-react-select-demo">
  <FormLabel>chakra-react-select demo</FormLabel>
  <Select
    inputId="chakra-react-select-demo"
    instanceId="chakra-react-select-1"
  />
</FormControl>

The main purpose of the id prop on the FormControl element is that it's a convenient way to set both the id prop on an input, and a for prop (htmlFor technically) on a FormLabel. So setting it manually on the input will have no negative effect, as long as both values are the same.

Here's a functional CodeSandbox example: https://codesandbox.io/s/z01hvy?file=/pages/index.tsx

@csandman csandman closed this as completed Oct 2, 2023
@csandman csandman added the Not Really a Bug Someone thought it was a bug, but turns out its not a bug label Oct 2, 2023
@csandman csandman removed the Not Really a Bug Someone thought it was a bug, but turns out its not a bug label Oct 28, 2023
@csandman csandman reopened this Oct 28, 2023
@csandman
Copy link
Owner

Sorry for the delay, but I believe my latest change to correctly support ESM imports should actually fix this issue, and prevent the need for the workaround! You can see the details in v4.9.0

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Bug Something isn't working
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants