[@mantine/core] PinInput: Fix updating controlled value to an empty s…

…tring working incorrectly
mantinedev · Feb 26, 2024 · 5f06ddd · 5f06ddd
1 parent fc33874
commit 5f06ddd
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 0 deletions.
diff --git a/packages/@mantine/core/src/components/PinInput/PinInput.story.tsx b/packages/@mantine/core/src/components/PinInput/PinInput.story.tsx
@@ -42,6 +42,17 @@ export function OnComplete() {
   );
 }
 
+export function ResetControlled() {
+  const [value, setValue] = useState('1234');
+
+  return (
+    <div style={{ padding: 40 }}>
+      <PinInput value={value} onChange={setValue} />
+      <Button onClick={() => setValue('')}>Reset</Button>
+    </div>
+  );
+}
+
 export function ReadOnly() {
   return (
     <div style={{ padding: 40 }}>

diff --git a/packages/@mantine/core/src/components/PinInput/PinInput.tsx b/packages/@mantine/core/src/components/PinInput/PinInput.tsx
@@ -337,6 +337,12 @@ export const PinInput = factory<PinInputFactory>((props, ref) => {
     }
   }, [length, _value]);
 
+  useEffect(() => {
+    if (value === '') {
+      setValues(createPinArray(length ?? 0, value));
+    }
+  }, [value]);
+
   return (
     <>
       <Group