From a496c7a4e95a77b3a3d13d05f7f88b2a7048346a Mon Sep 17 00:00:00 2001 From: Andrey Yamanov Date: Wed, 12 Nov 2025 12:00:22 +0100 Subject: [PATCH 1/2] fix(ComboBox): auto-focus behavior --- .changeset/fix-combobox-auto-focus.md | 6 ++++++ .cursor/worktrees.json | 5 +++++ src/components/fields/ComboBox/ComboBox.tsx | 22 +++++++++++++++++++-- 3 files changed, 31 insertions(+), 2 deletions(-) create mode 100644 .changeset/fix-combobox-auto-focus.md create mode 100644 .cursor/worktrees.json diff --git a/.changeset/fix-combobox-auto-focus.md b/.changeset/fix-combobox-auto-focus.md new file mode 100644 index 000000000..3da959f38 --- /dev/null +++ b/.changeset/fix-combobox-auto-focus.md @@ -0,0 +1,6 @@ +--- +"@cube-dev/ui-kit": patch +--- + +Fix ComboBox auto-focus behavior when using `allowsCustomValue`. The component now correctly maintains focus on the first filtered item while typing, allowing Enter key selection to work properly. The focus is automatically re-established when the currently focused item is filtered out of the list. + diff --git a/.cursor/worktrees.json b/.cursor/worktrees.json new file mode 100644 index 000000000..150c5dc53 --- /dev/null +++ b/.cursor/worktrees.json @@ -0,0 +1,5 @@ +{ + "setup-worktree": [ + "pnpm install" + ] +} \ No newline at end of file diff --git a/src/components/fields/ComboBox/ComboBox.tsx b/src/components/fields/ComboBox/ComboBox.tsx index 57265d244..72244eae5 100644 --- a/src/components/fields/ComboBox/ComboBox.tsx +++ b/src/components/fields/ComboBox/ComboBox.tsx @@ -1665,10 +1665,28 @@ export const ComboBox = forwardRef(function ComboBox( if (lastFocusSourceRef) lastFocusSourceRef.current = 'keyboard'; - if (selectionManager.focusedKey == null) { + // Check if we need to set or update focus + const currentFocusedKey = selectionManager.focusedKey; + let needsRefocus = false; + + if (currentFocusedKey == null) { + // No focus at all - need to set initial focus + needsRefocus = true; + } else { + // Check if currently focused key still exists in the collection + const focusedItemExists = collection.getItem(currentFocusedKey) != null; + if (!focusedItemExists) { + // Focused item was filtered out - need to refocus + needsRefocus = true; + } + } + + if (needsRefocus) { const keyToFocus = effectiveSelectedKey != null ? effectiveSelectedKey : collectFirstKey(); - if (keyToFocus != null) selectionManager.setFocusedKey(keyToFocus); + if (keyToFocus != null) { + selectionManager.setFocusedKey(keyToFocus); + } } }, [shouldShowPopover, effectiveSelectedKey]); From 36e2b1220aae33ed65ecf92b2394789dd42384d9 Mon Sep 17 00:00:00 2001 From: Andrey Yamanov Date: Wed, 12 Nov 2025 12:14:01 +0100 Subject: [PATCH 2/2] fix(ComboBox): auto-focus behavior * 2 --- .changeset/fix-combobox-auto-focus.md | 3 +-- src/components/fields/ComboBox/ComboBox.tsx | 15 +++++++++++++-- 2 files changed, 14 insertions(+), 4 deletions(-) diff --git a/.changeset/fix-combobox-auto-focus.md b/.changeset/fix-combobox-auto-focus.md index 3da959f38..54b98e4d5 100644 --- a/.changeset/fix-combobox-auto-focus.md +++ b/.changeset/fix-combobox-auto-focus.md @@ -2,5 +2,4 @@ "@cube-dev/ui-kit": patch --- -Fix ComboBox auto-focus behavior when using `allowsCustomValue`. The component now correctly maintains focus on the first filtered item while typing, allowing Enter key selection to work properly. The focus is automatically re-established when the currently focused item is filtered out of the list. - +Fix ComboBox auto-focus behavior when using `allowsCustomValue`. The component now correctly maintains focus on the first filtered item while typing, allowing Enter key selection to work properly. The focus is automatically re-established when the currently focused item is filtered out of the list. Additionally, the refocus logic now properly verifies that the selected item exists in the filtered collection before attempting to focus on it, preventing focus on non-existent keys. diff --git a/src/components/fields/ComboBox/ComboBox.tsx b/src/components/fields/ComboBox/ComboBox.tsx index 72244eae5..f704f5bfc 100644 --- a/src/components/fields/ComboBox/ComboBox.tsx +++ b/src/components/fields/ComboBox/ComboBox.tsx @@ -1682,8 +1682,19 @@ export const ComboBox = forwardRef(function ComboBox( } if (needsRefocus) { - const keyToFocus = - effectiveSelectedKey != null ? effectiveSelectedKey : collectFirstKey(); + let keyToFocus: Key | null = null; + + // First try to focus on the selected key if it exists in the collection + if ( + effectiveSelectedKey != null && + collection.getItem(effectiveSelectedKey) != null + ) { + keyToFocus = effectiveSelectedKey; + } else { + // Fall back to the first key in the collection + keyToFocus = collectFirstKey(); + } + if (keyToFocus != null) { selectionManager.setFocusedKey(keyToFocus); }