fix(input): avoid restoring stale selection after rerender

Author: QDyanbing

src/hooks/useCountExceed.ts

@@ -16,12 +16,18 @@ export default function useCountExceed<
   const [selection, setSelection] = React.useState<
     [start: number, end: number] | null
   >(null);
+  const getTargetRef = React.useRef(getTarget);
+
+  React.useEffect(() => {
+    getTargetRef.current = getTarget;
+  }, [getTarget]);
 
   React.useEffect(() => {
     if (selection) {
-      getTarget()?.setSelectionRange(...selection);
+      getTargetRef.current()?.setSelectionRange(...selection);
+      setSelection(null);
     }
-  }, [getTarget, selection]);
+  }, [selection]);
 
   const getExceedValue = React.useCallback(
     (currentValue: string, isComposing: boolean) => {
@@ -39,15 +45,15 @@ export default function useCountExceed<
 
         if (currentValue !== nextValue) {
           setSelection([
-            getTarget()?.selectionStart || 0,
-            getTarget()?.selectionEnd || 0,
+            getTargetRef.current()?.selectionStart || 0,
+            getTargetRef.current()?.selectionEnd || 0,
           ]);
         }
       }
 
       return nextValue;
     },
-    [countConfig, getTarget],
+    [countConfig],
   );
 
   return getExceedValue;

tests/count.test.tsx

@@ -109,6 +109,35 @@ describe('Input.Count', () => {
     expect(setSelectionRange).toHaveBeenCalledWith(2, 2);
   });
 
+  it('should not restore selection again on unrelated rerender', () => {
+    const count = {
+      show: true,
+      max: 3,
+      exceedFormatter: (val: string, { max }: { max: number }) =>
+        val.slice(0, max),
+    };
+    const { container, rerender } = render(
+      <Input count={count} defaultValue="123" />,
+    );
+
+    const input = container.querySelector('input')!;
+    const setSelectionRange = jest.spyOn(input, 'setSelectionRange');
+
+    fireEvent.change(input, {
+      target: {
+        selectionStart: 2,
+        selectionEnd: 2,
+        value: '1a23',
+      },
+    });
+
+    expect(setSelectionRange).toHaveBeenCalledTimes(1);
+
+    rerender(<Input count={count} defaultValue="123" className="rerender" />);
+
+    expect(setSelectionRange).toHaveBeenCalledTimes(1);
+  });
+
   it('input using the input method should trigger onChange once', () => {
     const onChange = jest.fn();
     const { container } = render(<Input onChange={onChange} />);