From 457f4316be6b77d53c15e42f36d432290d87e4cf Mon Sep 17 00:00:00 2001 From: Haz Date: Mon, 25 Mar 2024 13:09:48 +0100 Subject: [PATCH] Fix selection range lost issue in combobox --- packages/ariakit-react-core/src/combobox/combobox.tsx | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/packages/ariakit-react-core/src/combobox/combobox.tsx b/packages/ariakit-react-core/src/combobox/combobox.tsx index 0c2c4fed75..64e3f2f653 100644 --- a/packages/ariakit-react-core/src/combobox/combobox.tsx +++ b/packages/ariakit-react-core/src/combobox/combobox.tsx @@ -379,7 +379,8 @@ export const useCombobox = createHook( onChangeProp?.(event); if (event.defaultPrevented) return; if (!store) return; - const { value, selectionStart } = event.currentTarget; + const currentTarget = event.currentTarget; + const { value, selectionStart, selectionEnd } = currentTarget; const nativeEvent = event.nativeEvent; canAutoSelectRef.current = true; if (isInputEvent(nativeEvent)) { @@ -398,6 +399,11 @@ export const useCombobox = createHook( if (setValueOnChangeProp(event)) { const isSameValue = value === store.getState().value; store.setValue(value); + // When the value is not set synchronously, the selection range may be + // lost. See combobox-group "keep caret position when typing" test. + queueMicrotask(() => { + setSelectionRange(currentTarget, selectionStart, selectionEnd); + }); if (inline && autoSelect && isSameValue) { // The store.setValue(event.target.value) above may not trigger a // state update. For example, say the first item starts with "t". The