fix: change event should provider correct selection data (#65)

* fix: selection

* test: add test case

Author: zombieJ

.gitignore

@@ -40,3 +40,4 @@ dist/
 # dumi
 .dumi/tmp
 .dumi/tmp-production
+.node

src/utils/commonUtils.ts

@@ -9,6 +9,30 @@ export function hasPrefixSuffix(props: BaseInputProps | InputProps) {
   return !!(props.prefix || props.suffix || props.allowClear);
 }
 
+// TODO: It's better to use `Proxy` replace the `element.value`. But we still need support IE11.
+function cloneEvent<
+  EventType extends React.SyntheticEvent<any, any>,
+  Element extends HTMLInputElement | HTMLTextAreaElement,
+>(event: EventType, target: Element, value: any): EventType {
+  // A bug report filed on WebKit's Bugzilla tracker, dating back to 2009, specifically addresses the issue of cloneNode() not copying files of <input type="file"> elements.
+  // As of the last update, this bug was still marked as "NEW," indicating that it might not have been resolved yet​​.
+  // https://bugs.webkit.org/show_bug.cgi?id=28123
+  const currentTarget = target.cloneNode(true) as Element;
+
+  // click clear icon
+  const newEvent = Object.create(event, {
+    target: { value: currentTarget },
+    currentTarget: { value: currentTarget },
+  });
+
+  // Fill data
+  currentTarget.value = value;
+  currentTarget.selectionStart = target.selectionStart;
+  currentTarget.selectionEnd = target.selectionEnd;
+
+  return newEvent;
+}
+
 export function resolveOnChange<
   E extends HTMLInputElement | HTMLTextAreaElement,
 >(
@@ -38,18 +62,8 @@ export function resolveOnChange<
     //   }}
     // />
 
-    // A bug report filed on WebKit's Bugzilla tracker, dating back to 2009, specifically addresses the issue of cloneNode() not copying files of <input type="file"> elements.
-    // As of the last update, this bug was still marked as "NEW," indicating that it might not have been resolved yet​​.
-    // https://bugs.webkit.org/show_bug.cgi?id=28123
-    const currentTarget = target.cloneNode(true) as E;
-
-    // click clear icon
-    event = Object.create(e, {
-      target: { value: currentTarget },
-      currentTarget: { value: currentTarget },
-    });
+    event = cloneEvent(e, target, '');
 
-    currentTarget.value = '';
     onChange(event as React.ChangeEvent<E>);
     return;
   }
@@ -58,16 +72,7 @@ export function resolveOnChange<
   // https://github.com/ant-design/ant-design/issues/45737
   // https://github.com/ant-design/ant-design/issues/46598
   if (target.type !== 'file' && targetValue !== undefined) {
-    // A bug report filed on WebKit's Bugzilla tracker, dating back to 2009, specifically addresses the issue of cloneNode() not copying files of <input type="file"> elements.
-    // As of the last update, this bug was still marked as "NEW," indicating that it might not have been resolved yet​​.
-    // https://bugs.webkit.org/show_bug.cgi?id=28123
-    const currentTarget = target.cloneNode(true) as E;
-
-    event = Object.create(e, {
-      target: { value: currentTarget },
-      currentTarget: { value: currentTarget },
-    });
-    currentTarget.value = targetValue;
+    event = cloneEvent(e, target, targetValue);
     onChange(event as React.ChangeEvent<E>);
     return;
   }

tests/index.test.tsx

@@ -349,6 +349,19 @@ describe('Input ref', () => {
     inputSpy.mockRestore();
   });
 
+  it('selectionXXX should pass', () => {
+    const onChange = jest.fn();
+    const { container } = render(<Input onChange={onChange} />);
+
+    const inputEl = container.querySelector('input')!;
+    fireEvent.change(inputEl, { target: { value: 'test' } });
+
+    expect(onChange).toHaveBeenCalled();
+    const event = onChange.mock.calls[0][0];
+    expect(event.target.selectionStart).toBe(4);
+    expect(event.target.selectionEnd).toBe(4);
+  });
+
   it('input should work', () => {
     const ref = React.createRef<InputRef>();
     const { container } = render(<Input ref={ref} defaultValue="light" />);