csandman
[BUG] Warning: Prop `id` did not match. Server:
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?
- [X] Yes I use TypeScript
Steps to reproduce
- Go to https://codesandbox.io/s/laughing-turing-9089o6
- Look in console
Operating System
- [X] macOS
- [ ] Windows
- [ ] Linux
- [ ] iOS/iPadOS
- [ ] Android
Additional Information
No response
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
