diff --git a/src/OptionList.tsx b/src/OptionList.tsx index ece78413b..a8637c7f3 100644 --- a/src/OptionList.tsx +++ b/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 ========================== diff --git a/src/Selector/Input.tsx b/src/Selector/Input.tsx index 3c76ed4eb..db012fe5d 100644 --- a/src/Selector/Input.tsx +++ b/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 | React.Ref, -) { - if (typeof ref === 'function') { - ref(node); - } else if (ref && typeof ref === 'object') { - (ref as any).current = node; - } + onKeyDown: React.KeyboardEventHandler; + onMouseDown: React.MouseEventHandler; + onChange: React.ChangeEventHandler; } const Input: React.RefForwardingComponent = ( @@ -66,14 +50,9 @@ const Input: React.RefForwardingComponent = ( }, } = 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',