From fb5ebd3beda95babfeda886810faa17ef0eeee8d Mon Sep 17 00:00:00 2001 From: Waleed Date: Fri, 10 Apr 2026 14:30:09 -0700 Subject: [PATCH] fix(ui): support Tab key to select items in tag, env-var, and resource dropdowns (#4096) * fix(ui): support Tab key to select items in tag, env-var, and resource dropdowns * fix(ui): support Tab key to select items in tag, env-var, and resource dropdowns * fix(ui): guard Tab selection against Shift+Tab and undefined index --- .../add-resource-dropdown/add-resource-dropdown.tsx | 4 ++-- .../sub-block/components/env-var-dropdown.tsx | 10 +++++++--- .../components/keyboard-navigation-handler.tsx | 6 ++++-- 3 files changed, 13 insertions(+), 7 deletions(-) diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/add-resource-dropdown/add-resource-dropdown.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/add-resource-dropdown/add-resource-dropdown.tsx index b19a70f725..6749f71fb7 100644 --- a/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/add-resource-dropdown/add-resource-dropdown.tsx +++ b/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/add-resource-dropdown/add-resource-dropdown.tsx @@ -167,9 +167,9 @@ export function AddResourceDropdown({ } else if (e.key === 'ArrowUp') { e.preventDefault() setActiveIndex((prev) => Math.max(prev - 1, 0)) - } else if (e.key === 'Enter') { - e.preventDefault() + } else if (e.key === 'Enter' || (e.key === 'Tab' && !e.shiftKey)) { if (filtered.length > 0 && filtered[activeIndex]) { + e.preventDefault() const { type, item } = filtered[activeIndex] select({ type, id: item.id, title: item.name }, item.isOpen) } diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/env-var-dropdown.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/env-var-dropdown.tsx index 49fbe2d306..0966459a40 100644 --- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/env-var-dropdown.tsx +++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/env-var-dropdown.tsx @@ -242,9 +242,13 @@ export const EnvVarDropdown: React.FC = ({ }) break case 'Enter': - e.preventDefault() - e.stopPropagation() - handleEnvVarSelect(filteredEnvVars[selectedIndex]) + case 'Tab': + if (e.key === 'Tab' && e.shiftKey) break + if (filteredEnvVars[selectedIndex]) { + e.preventDefault() + e.stopPropagation() + handleEnvVarSelect(filteredEnvVars[selectedIndex]) + } break case 'Escape': e.preventDefault() diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tag-dropdown/components/keyboard-navigation-handler.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tag-dropdown/components/keyboard-navigation-handler.tsx index adb2981be4..3d25cb7f58 100644 --- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tag-dropdown/components/keyboard-navigation-handler.tsx +++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tag-dropdown/components/keyboard-navigation-handler.tsx @@ -279,9 +279,11 @@ export const KeyboardNavigationHandler: React.FC } break case 'Enter': - e.preventDefault() - e.stopPropagation() + case 'Tab': + if (e.key === 'Tab' && e.shiftKey) break if (selected && selectedIndex >= 0 && selectedIndex < flatTagList.length) { + e.preventDefault() + e.stopPropagation() handleTagSelect(selected.tag, selected.group) } break