fix(pin-input): focus issue (#6689)

chakra-ui · Sep 16, 2022 · f6002e4 · f6002e4 · vercel · Sep 16, 2022
1 parent 59391bb
commit f6002e4
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 3 deletions.
diff --git a/.changeset/afraid-gorillas-give.md b/.changeset/afraid-gorillas-give.md
@@ -0,0 +1,5 @@
+---
+"@chakra-ui/pin-input": patch
+---
+
+Fix issue where backspace did not focus prev input
diff --git a/packages/components/pin-input/src/use-pin-input.ts b/packages/components/pin-input/src/use-pin-input.ts
@@ -178,7 +178,7 @@ export function usePinInput(props: UsePinInputProps = {}) {
   )
 
   const setValue = useCallback(
-    (value: string, index: number) => {
+    (value: string, index: number, handleFocus: boolean = true) => {
       const nextValues = [...values]
       nextValues[index] = value
       setValues(nextValues)
@@ -193,7 +193,7 @@ export function usePinInput(props: UsePinInputProps = {}) {
       if (isComplete) {
         onComplete?.(nextValues.join(""))
       } else {
-        focusNext(index)
+        if (handleFocus) focusNext(index)
       }
     },
     [values, setValues, focusNext, onComplete, descendants],
@@ -267,7 +267,7 @@ export function usePinInput(props: UsePinInputProps = {}) {
           if ((event.target as HTMLInputElement).value === "") {
             const prevInput = descendants.prev(index, false)
             if (prevInput) {
-              setValue("", index - 1)
+              setValue("", index - 1, false)
               prevInput.node?.focus()
               setMoveFocus(true)
             }