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

[Kolby-Udacity]

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

[csandman]

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]

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