[@mantine/core] PinInput: Fix onComplete prop firing incorrectly (m…

…antinedev#3715) * [@mantine/core] PinInput: onComplete fires correclty - issue 3714 * [@mantine/core] PinInput: onComplete called correctly - issue 3714 --------- Co-authored-by: ignisiitech <ignisii@outlook.com>
milhamm · Mar 14, 2023 · 92e3025 · 92e3025
1 parent 993406a
commit 92e3025
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 9 deletions.
diff --git a/src/mantine-core/src/PinInput/PinInput.story.tsx b/src/mantine-core/src/PinInput/PinInput.story.tsx
@@ -12,6 +12,16 @@ export function Usage() {
   );
 }
 
+export function OnComplete() {
+  const [value, setValue] = useState('');
+  return (
+    <div style={{ padding: 40 }}>
+      <PinInput length={5} onComplete={setValue} />
+      Pin: {value}
+    </div>
+  );
+}
+
 export function ReadOnly() {
   return (
     <div style={{ padding: 40 }}>

diff --git a/src/mantine-core/src/PinInput/PinInput.test.tsx b/src/mantine-core/src/PinInput/PinInput.test.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { render } from '@testing-library/react';
+import { render, fireEvent } from '@testing-library/react';
 import { checkAccessibility, itSupportsSystemProps } from '@mantine/tests';
 import { PinInput, PinInputProps } from './PinInput';
 
@@ -19,4 +19,19 @@ describe('@mantine/core/PinInput', () => {
     const { container } = render(<PinInput {...defaultProps} length={5} />);
     expect(container.querySelectorAll('.mantine-PinInput-input')).toHaveLength(5);
   });
+
+  it('onComplete is called on last input', () => {
+    const log = jest.spyOn(global.console, 'log');
+    const { container } = render(
+      <PinInput {...defaultProps} onComplete={(value) => console.log(value)} />
+    );
+
+    expect(container.querySelectorAll('.mantine-PinInput-input')).toHaveLength(4);
+
+    container.querySelectorAll('.mantine-PinInput-input').forEach((element) => {
+      fireEvent.change(element, { target: { value: '1' } });
+    });
+
+    expect(log).toHaveBeenCalledWith('1111');
+  });
 });
diff --git a/src/mantine-core/src/PinInput/PinInput.tsx b/src/mantine-core/src/PinInput/PinInput.tsx
@@ -1,4 +1,4 @@
-import React, { forwardRef, useRef, useState } from 'react';
+import React, { forwardRef, useRef, useState, useEffect } from 'react';
 import { useUncontrolled, useId } from '@mantine/hooks';
 import {
   DefaultProps,
@@ -197,13 +197,7 @@ export const PinInput = forwardRef<HTMLDivElement, PinInputProps>((props, ref) =
 
     if (isValid) {
       setFieldValue(nextChar, index);
-      const isComplete = _value.length === length;
-
-      if (isComplete) {
-        onComplete?.(_value);
-      } else {
-        focusInputField('next', index);
-      }
+      focusInputField('next', index);
     } else {
       setFieldValue('', index);
     }
@@ -238,6 +232,12 @@ export const PinInput = forwardRef<HTMLDivElement, PinInputProps>((props, ref) =
     }
   };
 
+  useEffect(() => {
+    if (_value.length !== length) return;
+
+    onComplete?.(_value);
+  }, [_value]);
+
   return (
     <>
       <Group