fix: form-control concurrent mode issues

chakra-ui · Mar 26, 2021 · 3cc77ce · 3cc77ce
1 parent a58b724
commit 3cc77ce
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 2 deletions.
diff --git a/.changeset/soft-flowers-tickle.md b/.changeset/soft-flowers-tickle.md
@@ -0,0 +1,6 @@
+---
+"@chakra-ui/form-control": patch
+---
+
+Fix concurrent mode issue with setting state in focus event handler. We use
+`withFlushSync` helper to achieve this.
diff --git a/packages/form-control/src/form-control.tsx b/packages/form-control/src/form-control.tsx
@@ -9,7 +9,7 @@ import {
   useStyles,
   HTMLChakraProps,
 } from "@chakra-ui/system"
-import { createContext, cx, __DEV__ } from "@chakra-ui/utils"
+import { createContext, cx, withFlushSync, __DEV__ } from "@chakra-ui/utils"
 import * as React from "react"
 
 export interface FormControlOptions {
@@ -107,7 +107,7 @@ function useFormControlProvider(props: FormControlContext) {
     isReadOnly: !!isReadOnly,
     isDisabled: !!isDisabled,
     isFocused: !!isFocused,
-    onFocus: setFocus.on,
+    onFocus: withFlushSync(setFocus.on),
     onBlur: setFocus.off,
     hasFeedbackText,
     setHasFeedbackText,