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

Author: waleedlatif1

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)
         }

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<EnvVarDropdownProps> = ({
             })
             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()

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<KeyboardNavigationHandlerProps>
           }
           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