improvement(popover): added keyboard nav to tag dropdown popover to iterate over parent & child items

[waleedlatif1]

Summary

• added keyboard nav to tag dropdown popover to iterate over parent & child items, previously the keyboard navigation ignored parent objects

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]

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

1 Skipped Deployment

Project	Deployment	Preview	Comments	Updated (UTC)
docs	Skipped			Nov 11, 2025 11:51pm

[greptile-apps]

Greptile Overview

Greptile Summary

This PR adds keyboard navigation to the tag dropdown popover, enabling users to navigate through both parent tags and their children using arrow keys. Previously, keyboard navigation ignored parent objects.

Key Changes:

• Created new KeyboardNavigationHandler component that manages keyboard events and calculates visible indices based on folder state
• Enhanced Popover component to support onSelect callbacks for folder titles, making parent tags selectable from within folder view
• Modified PopoverBackButton to render parent tag as a clickable/hoverable item when onFolderSelect is provided
• Added parentTag property to NestedTag type to track parent-child relationships
• Integrated keyboard navigation with the popover context for folder state management

Implementation Details:

• Arrow keys navigate through visibleIndices (root level shows non-child tags, folder level shows parent + children)
• Arrow Right opens folders, Arrow Left closes them
• Enter selects current item or opens folder if it's a parent tag
• Parent tags are now included as the first navigable item when inside a folder

Confidence Score: 3/5

• This PR improves keyboard navigation but contains a logic bug in folder selection
• The implementation correctly adds keyboard navigation for parent and child tags, but has a critical logic error in openFolderWithSelection where it selects the first child instead of the parent tag when opening folders. This causes a mismatch between the displayed selection (parent tag in back button) and the keyboard-selected item (first child), breaking the navigation UX. The rest of the implementation is solid with proper context management and clean separation of concerns.
• keyboard-navigation-handler.tsx requires attention to fix the folder selection index logic

Important Files Changed

File Analysis

Filename	Score	Overview
apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel-new/components/editor/components/sub-block/components/tag-dropdown/components/keyboard-navigation-handler.tsx	3/5	New keyboard navigation handler with logic issue in folder selection index
apps/sim/components/emcn/components/popover/popover.tsx	4/5	Enhanced popover with folder selection callback support and selectable parent tags
apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel-new/components/editor/components/sub-block/components/tag-dropdown/tag-dropdown.tsx	4/5	Integrated keyboard navigation handler, added back button with parent selection support

Sequence Diagram

sequenceDiagram
participant User
participant TagDropdown
participant KeyboardNav
participant PopoverContext
participant PopoverBackButton
User->>TagDropdown: Opens tag dropdown (< trigger)
TagDropdown->>KeyboardNav: Mount with visible=true
KeyboardNav->>KeyboardNav: Calculate visibleIndices
Note over KeyboardNav: Root level: all non-child tags<br/>In folder: parent tag + children
User->>KeyboardNav: Press ArrowDown/ArrowUp
KeyboardNav->>KeyboardNav: Navigate through visibleIndices
KeyboardNav->>TagDropdown: Update selectedIndex
TagDropdown->>TagDropdown: Scroll item into view
User->>KeyboardNav: Press ArrowRight on parent tag
KeyboardNav->>KeyboardNav: openFolderWithSelection()
KeyboardNav->>PopoverContext: openFolder(id, title, onLoad, onSelect)
PopoverContext->>PopoverContext: Store onFolderSelect callback
KeyboardNav->>TagDropdown: setSelectedIndex to first child
Note over KeyboardNav: Bug: should select parent, not first child
TagDropdown->>PopoverBackButton: Render with parent tag
PopoverBackButton->>PopoverBackButton: Show selectable folder title
User->>KeyboardNav: Navigate in folder
KeyboardNav->>KeyboardNav: Use folder visibleIndices
Note over KeyboardNav: Parent tag is first item
User->>KeyboardNav: Press Enter on parent tag
KeyboardNav->>TagDropdown: handleTagSelect(parentTag)
TagDropdown->>User: Insert parent tag into input
User->>PopoverBackButton: Press ArrowLeft
KeyboardNav->>PopoverContext: closeFolder()
PopoverContext->>PopoverContext: Clear onFolderSelect
KeyboardNav->>TagDropdown: Navigate to first root item

Loading

[greptile-apps]

_{23 files reviewed, 1 comment}

_{Edit Code Review Agent Settings | Greptile}

[waleedlatif1]

@greptile

[greptile-apps]

_{23 files reviewed, 1 comment}

_{Edit Code Review Agent Settings | Greptile}