fix(react-select): use id to prevent hydration errors (#140)

onebeyond · May 26, 2023 · bfcbdf0 · bfcbdf0
1 parent f641f20
commit bfcbdf0
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 4 deletions.
diff --git a/src/Fields/AsyncReactSelect/index.js b/src/Fields/AsyncReactSelect/index.js
@@ -1,6 +1,6 @@
 /** @jsxRuntime classic */
 
-import React from 'react'
+import React, { useId } from 'react'
 
 import { useThemeUI } from 'theme-ui'
 import { RHFInput } from 'react-hook-form-input'
@@ -90,7 +90,14 @@ const Select = ({
  return (
  <RHFInput
  onChange={onChange}
- as={<AsyncSelect aria-label={label} styles={customStyles} {...props} />}
+ as={
+ <AsyncSelect
+ aria-label={label}
+ styles={customStyles}
+ id={useId()}
+ {...props}
+ />
+ }
  rules={{
  ...registerConfig,
  validate: {

diff --git a/src/Fields/Select/index.js b/src/Fields/Select/index.js
@@ -1,6 +1,6 @@
 /** @jsxRuntime classic */
 
-import React from 'react'
+import React, { useId } from 'react'
 
 import { useThemeUI } from 'theme-ui'
 import { RHFInput } from 'react-hook-form-input'
@@ -90,7 +90,14 @@ const Select = ({
  return (
  <RHFInput
  onChange={onChange}
- as={<ReactSelect aria-label={label} styles={customStyles} {...props} />}
+ as={
+ <ReactSelect
+ aria-label={label}
+ styles={customStyles}
+ id={useId()}
+ {...props}
+ />
+ }
  rules={{
  ...registerConfig,
  validate: {