fix: AutoComplete typing to open input value (#465)

* Use ref

* Use class

* Revert "Use class"

This reverts commit 99e505c.

* Revert "Revert "Use class""

This reverts commit 1e72c1f.

* Revert "Revert "Revert "Use class"""

This reverts commit ba14e48.

* delay for update status

Author: zombieJ

src/OptionList.tsx

@@ -129,14 +129,21 @@ const OptionList: React.RefForwardingComponent<
 
   // Auto scroll to item position in single mode
   React.useEffect(() => {
-    if (!multiple && open && values.size === 1) {
-      const value: RawValueType = Array.from(values)[0];
-      const index = memoFlattenOptions.findIndex(
-        ({ data }) => (data as OptionData).value === value,
-      );
-      setActive(index);
-      scrollIntoView(index);
-    }
+    /**
+     * React will skip `onChange` when component update.
+     * `setActive` function will call root accessibility state update which makes re-render.
+     * So we need to delay to let Input component trigger onChange first.
+     */
+    setTimeout(() => {
+      if (!multiple && open && values.size === 1) {
+        const value: RawValueType = Array.from(values)[0];
+        const index = memoFlattenOptions.findIndex(
+          ({ data }) => (data as OptionData).value === value,
+        );
+        setActive(index);
+        scrollIntoView(index);
+      }
+    });
   }, [open]);
 
   // ========================== Values ==========================

src/Selector/Input.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { composeRef } from 'rc-util/lib/ref';
 
 type InputRef = HTMLInputElement | HTMLTextAreaElement;
 
@@ -14,26 +15,9 @@ interface InputProps {
   open: boolean;
   tabIndex: number;
 
-  onKeyDown: React.KeyboardEventHandler<
-    HTMLInputElement | HTMLTextAreaElement | HTMLElement
-  >;
-  onMouseDown: React.MouseEventHandler<
-    HTMLInputElement | HTMLTextAreaElement | HTMLElement
-  >;
-  onChange: React.ChangeEventHandler<
-    HTMLInputElement | HTMLTextAreaElement | HTMLElement
-  >;
-}
-
-function fillRef(
-  node: InputRef,
-  ref: React.LegacyRef<InputRef> | React.Ref<InputRef>,
-) {
-  if (typeof ref === 'function') {
-    ref(node);
-  } else if (ref && typeof ref === 'object') {
-    (ref as any).current = node;
-  }
+  onKeyDown: React.KeyboardEventHandler<HTMLInputElement | HTMLTextAreaElement | HTMLElement>;
+  onMouseDown: React.MouseEventHandler<HTMLInputElement | HTMLTextAreaElement | HTMLElement>;
+  onChange: React.ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement | HTMLElement>;
 }
 
 const Input: React.RefForwardingComponent<InputRef, InputProps> = (
@@ -66,14 +50,9 @@ const Input: React.RefForwardingComponent<InputRef, InputProps> = (
     },
   } = inputNode;
 
-  function inputRef(node: InputRef) {
-    fillRef(node, ref);
-    fillRef(node, originRef);
-  }
-
   inputNode = React.cloneElement(inputNode, {
     id,
-    ref: inputRef,
+    ref: composeRef(ref, originRef as any),
     disabled,
     tabIndex,
     autoComplete: 'off',