fix(checkbox): remove focus styles when disabled

chakra-ui · Oct 25, 2021 · 73ea70c · 73ea70c
1 parent bcf319f
commit 73ea70c
Showing 1 changed file with 7 additions and 0 deletions.
diff --git a/packages/checkbox/src/use-checkbox.ts b/packages/checkbox/src/use-checkbox.ts
@@ -11,6 +11,7 @@ import React, {
   ChangeEvent,
   KeyboardEvent,
   useCallback,
+  useEffect,
   useRef,
   useState,
 } from "react"
@@ -189,6 +190,12 @@ export function useCheckbox(props: UseCheckboxProps = {}) {
     }
   }, [isIndeterminate])
 
+  useEffect(() => {
+    if (isDisabled) {
+      setFocused.off()
+    }
+  }, [isDisabled, setFocused])
+
   const trulyDisabled = isDisabled && !isFocusable
 
   const onKeyDown = useCallback(