From 9abaa16f4347b64e6ad5aa1188f50e90d07c18f8 Mon Sep 17 00:00:00 2001 From: waleed Date: Fri, 10 Apr 2026 13:11:26 -0700 Subject: [PATCH 1/3] fix(ui): support Tab key to select items in tag, env-var, and resource dropdowns --- .../components/add-resource-dropdown/add-resource-dropdown.tsx | 2 +- .../editor/components/sub-block/components/env-var-dropdown.tsx | 1 + .../tag-dropdown/components/keyboard-navigation-handler.tsx | 1 + 3 files changed, 3 insertions(+), 1 deletion(-) 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 b19a70f725b..0ff0c81396f 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,7 +167,7 @@ export function AddResourceDropdown({ } else if (e.key === 'ArrowUp') { e.preventDefault() setActiveIndex((prev) => Math.max(prev - 1, 0)) - } else if (e.key === 'Enter') { + } else if (e.key === 'Enter' || e.key === 'Tab') { e.preventDefault() if (filtered.length > 0 && filtered[activeIndex]) { const { type, item } = filtered[activeIndex] 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 49fbe2d306d..4869809fb85 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,6 +242,7 @@ export const EnvVarDropdown: React.FC = ({ }) break case 'Enter': + case 'Tab': e.preventDefault() e.stopPropagation() handleEnvVarSelect(filteredEnvVars[selectedIndex]) 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 adb2981be4c..9ad3c8d681f 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,6 +279,7 @@ export const KeyboardNavigationHandler: React.FC } break case 'Enter': + case 'Tab': e.preventDefault() e.stopPropagation() if (selected && selectedIndex >= 0 && selectedIndex < flatTagList.length) { From bbeb706472aa53d388f28a0464371d52ad607123 Mon Sep 17 00:00:00 2001 From: waleed Date: Fri, 10 Apr 2026 13:24:07 -0700 Subject: [PATCH 2/3] fix(ui): support Tab key to select items in tag, env-var, and resource dropdowns --- .../components/add-resource-dropdown/add-resource-dropdown.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 0ff0c81396f..288eb63db5c 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 @@ -168,8 +168,8 @@ export function AddResourceDropdown({ e.preventDefault() setActiveIndex((prev) => Math.max(prev - 1, 0)) } else if (e.key === 'Enter' || e.key === 'Tab') { - e.preventDefault() if (filtered.length > 0 && filtered[activeIndex]) { + e.preventDefault() const { type, item } = filtered[activeIndex] select({ type, id: item.id, title: item.name }, item.isOpen) } From fba9b16f4f00766612e8be2b84902473ec9162f4 Mon Sep 17 00:00:00 2001 From: waleed Date: Fri, 10 Apr 2026 14:18:39 -0700 Subject: [PATCH 3/3] fix(ui): guard Tab selection against Shift+Tab and undefined index --- .../add-resource-dropdown/add-resource-dropdown.tsx | 2 +- .../components/sub-block/components/env-var-dropdown.tsx | 9 ++++++--- .../components/keyboard-navigation-handler.tsx | 5 +++-- 3 files changed, 10 insertions(+), 6 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 288eb63db5c..6749f71fb75 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,7 +167,7 @@ export function AddResourceDropdown({ } else if (e.key === 'ArrowUp') { e.preventDefault() setActiveIndex((prev) => Math.max(prev - 1, 0)) - } else if (e.key === 'Enter' || e.key === 'Tab') { + } else if (e.key === 'Enter' || (e.key === 'Tab' && !e.shiftKey)) { if (filtered.length > 0 && filtered[activeIndex]) { e.preventDefault() const { type, item } = filtered[activeIndex] 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 4869809fb85..0966459a403 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 @@ -243,9 +243,12 @@ export const EnvVarDropdown: React.FC = ({ break case 'Enter': case 'Tab': - e.preventDefault() - e.stopPropagation() - handleEnvVarSelect(filteredEnvVars[selectedIndex]) + 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 9ad3c8d681f..3d25cb7f58d 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 @@ -280,9 +280,10 @@ export const KeyboardNavigationHandler: React.FC break case 'Enter': case 'Tab': - e.preventDefault() - e.stopPropagation() + if (e.key === 'Tab' && e.shiftKey) break if (selected && selectedIndex >= 0 && selectedIndex < flatTagList.length) { + e.preventDefault() + e.stopPropagation() handleTagSelect(selected.tag, selected.group) } break