Skip to content

fix(ui): support Tab key to select items in tag, env-var, and resource dropdowns#4096

Merged
waleedlatif1 merged 3 commits intostagingfrom
fix/tag-drop
Apr 10, 2026
Merged

fix(ui): support Tab key to select items in tag, env-var, and resource dropdowns#4096
waleedlatif1 merged 3 commits intostagingfrom
fix/tag-drop

Conversation

@waleedlatif1
Copy link
Copy Markdown
Collaborator

Summary

  • Added Tab as an alternative to Enter for selecting items in the tag dropdown (block variable picker)
  • Added Tab as an alternative to Enter for selecting items in the env var dropdown
  • Added Tab as an alternative to Enter for selecting items in the add resource dropdown

Type of Change

  • Bug fix

Testing

Tested manually

Checklist

  • Code follows project style guidelines
  • Self-reviewed my changes
  • Tests added/updated and passing
  • No new warnings introduced
  • I confirm that I have read and agree to the terms outlined in the Contributor License Agreement (CLA)

@vercel
Copy link
Copy Markdown

vercel bot commented Apr 10, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

1 Skipped Deployment
Project Deployment Actions Updated (UTC)
docs Skipped Skipped Apr 10, 2026 9:18pm

Request Review

@cursor
Copy link
Copy Markdown

cursor bot commented Apr 10, 2026

PR Summary

Low Risk
Low risk UI-only change: expands keyboard handlers to treat Tab like Enter for selection while preserving Shift+Tab for reverse focus movement.

Overview
Keyboard navigation improvement: Tab (without Shift) now selects the currently highlighted option in the add-resource search dropdown, env-var dropdown, and tag dropdown, matching existing Enter behavior.

Selection handlers now call preventDefault/stopPropagation only when an item is actually selectable, and Shift+Tab continues to fall through for normal reverse tabbing.

Reviewed by Cursor Bugbot for commit fba9b16. Configure here.

@greptile-apps
Copy link
Copy Markdown
Contributor

greptile-apps bot commented Apr 10, 2026

Greptile Summary

This PR adds Tab key support as an alternative to Enter for selecting items in the tag, env-var, and resource dropdowns. All three implementations correctly guard against Shift+Tab (to preserve reverse-focus behavior) and check for a valid selected index before calling preventDefault(), so natural Tab focus movement is preserved when no item is selected or the list is empty.

Confidence Score: 5/5

Safe to merge — all three implementations correctly handle Tab selection with proper Shift+Tab and empty-list guards.

No P0 or P1 findings. The Shift+Tab guard and item-existence checks are consistently applied across all three components. Behavior mirrors the existing Enter key path exactly, which is well-tested.

No files require special attention.

Important Files Changed

Filename Overview
apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tag-dropdown/components/keyboard-navigation-handler.tsx Added Tab as a fall-through case alongside Enter in the switch handler; Shift+Tab guard and existing selection guards are correctly applied.
apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/env-var-dropdown.tsx Tab added as a fall-through to Enter in the global keydown listener; Shift+Tab guard breaks before preventDefault, so Shift+Tab focus movement is unblocked.
apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/add-resource-dropdown/add-resource-dropdown.tsx Tab guarded inline with !e.shiftKey in handleSearchKeyDown; only active when filtered results exist, so Tab passes through naturally on empty search or unfiltered sub-menu view.

Flowchart

%%{init: {'theme': 'neutral'}}%%
flowchart TD
    A[keydown event captured] --> B{key?}
    B -- ArrowDown/ArrowUp --> C[Update selectedIndex]
    B -- Tab --> D{shiftKey?}
    B -- Enter --> G
    B -- Escape --> H[Close dropdown]
    D -- Yes --> E[break — no preventDefault\nShift+Tab moves focus naturally]
    D -- No --> F{valid selectedIndex\n& item exists?}
    F -- No --> E2[break — no preventDefault\nTab moves focus naturally]
    F -- Yes --> G[preventDefault + stopPropagation\nSelect item — close dropdown]
Loading

Reviews (3): Last reviewed commit: "fix(ui): guard Tab selection against Shi..." | Re-trigger Greptile

@waleedlatif1
Copy link
Copy Markdown
Collaborator Author

@greptile

@waleedlatif1
Copy link
Copy Markdown
Collaborator Author

@cursor review

@waleedlatif1
Copy link
Copy Markdown
Collaborator Author

@greptile

@waleedlatif1
Copy link
Copy Markdown
Collaborator Author

@cursor review

Copy link
Copy Markdown

@cursor cursor bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

✅ Bugbot reviewed your changes and found no new issues!

Comment @cursor review or bugbot run to trigger another review on this PR

Reviewed by Cursor Bugbot for commit fba9b16. Configure here.

@waleedlatif1 waleedlatif1 merged commit fb5ebd3 into staging Apr 10, 2026
12 checks passed
@waleedlatif1 waleedlatif1 deleted the fix/tag-drop branch April 10, 2026 21:30
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant