Skip to content

fix(makeselectable): fix arrow key navigation for menus inside table#4455

Merged
mergify[bot] merged 2 commits intobox:masterfrom
loonskai:makeselectable-role-menu
Feb 26, 2026
Merged

fix(makeselectable): fix arrow key navigation for menus inside table#4455
mergify[bot] merged 2 commits intobox:masterfrom
loonskai:makeselectable-role-menu

Conversation

@loonskai
Copy link
Contributor

@loonskai loonskai commented Feb 26, 2026

Fix arrow keys navigation with makeSelectable table helper for other types of dropdown menus (besides BUIE dropdown menu).

Summary by CodeRabbit

  • Bug Fixes
    • Improved dropdown menu detection in table and grid views to properly recognize when menus are open. This ensures correct focus behavior and keyboard navigation, allowing arrow key shortcuts and navigation commands to work as expected when dropdown menus are active.

@loonskai loonskai requested a review from a team as a code owner February 26, 2026 15:02
@coderabbitai
Copy link
Contributor

coderabbitai bot commented Feb 26, 2026

Walkthrough

The changes expand dropdown menu detection logic to recognize both .dropdown-menu-element class and role="menu" attribute, with comprehensive test coverage verifying focus behavior and menu detection across multiple hotkey scenarios.

Changes

Cohort / File(s) Summary
Test Coverage
src/components/table/__tests__/makeSelectable.test.js
Added 88 lines of test cases verifying focus behavior when dropdown menus are present and testing isDropdownMenuOpen() detection logic for both .dropdown-menu-element and role="menu" attributes.
Menu Detection Logic
src/components/table/makeSelectable.js
Updated isDropdownMenuOpen() to return true if either .dropdown-menu-element class or role="menu" attribute exists, expanding dropdown detection scope.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

Suggested labels

ready-to-merge

Suggested reviewers

  • tjuanitas
  • jfox-box

Poem

🐰 A menu by any name or class,
Now spotted with greater sass,
Role or element, we see them all,
Focus stays steady, arrows don't call!

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (2 passed)
Check name Status Explanation
Title check ✅ Passed The title clearly summarizes the main change: fixing arrow key navigation in the makeSelectable table helper to support dropdown menus with role="menu" in addition to BUIE dropdown menus.
Description check ✅ Passed The PR description adequately explains the purpose (fixing arrow key navigation for other dropdown menu types), but lacks implementation details about what was changed and why the fix works.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Post copyable unit tests in a comment

Tip

Try Coding Plans. Let us write the prompt for your AI agent so you can ship faster (with fewer bugs).
Share your feedback on Discord.


Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

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

🧹 Nitpick comments (1)
src/components/table/makeSelectable.js (1)

649-651: Scope menu detection to visible/open menus to avoid false navigation lockouts.

The global [role="menu"] check can match hidden or persistent menu containers and block table arrow navigation even when no dropdown is actively open. Consider filtering matched nodes by visible/open state.

Proposed refinement
-        isDropdownMenuOpen = () =>
-            document.querySelector('.dropdown-menu-element') !== null ||
-            document.querySelector('[role="menu"]') !== null;
+        isDropdownMenuOpen = () =>
+            Array.from(document.querySelectorAll('.dropdown-menu-element, [role="menu"]')).some(
+                el => !el.hasAttribute('hidden') && el.getAttribute('aria-hidden') !== 'true',
+            );
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@src/components/table/makeSelectable.js` around lines 649 - 651, The
isDropdownMenuOpen function currently returns true for any matching
.dropdown-menu-element or [role="menu"] in the document, which can include
hidden/persistent containers; update isDropdownMenuOpen to only consider nodes
that are actually visible/open by filtering the querySelector results for
visible state (e.g., check aria-expanded="true" on the toggle, computed style
visibility/display, non-empty boundingClientRect, or offsetParent) and/or
requiring a class that denotes the open state; locate and modify the
isDropdownMenuOpen arrow function and apply the visibility filtering to the
node(s) returned for both '.dropdown-menu-element' and '[role="menu"]' checks so
only active menus block table arrow navigation.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Nitpick comments:
In `@src/components/table/makeSelectable.js`:
- Around line 649-651: The isDropdownMenuOpen function currently returns true
for any matching .dropdown-menu-element or [role="menu"] in the document, which
can include hidden/persistent containers; update isDropdownMenuOpen to only
consider nodes that are actually visible/open by filtering the querySelector
results for visible state (e.g., check aria-expanded="true" on the toggle,
computed style visibility/display, non-empty boundingClientRect, or
offsetParent) and/or requiring a class that denotes the open state; locate and
modify the isDropdownMenuOpen arrow function and apply the visibility filtering
to the node(s) returned for both '.dropdown-menu-element' and '[role="menu"]'
checks so only active menus block table arrow navigation.

ℹ️ Review info

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 6de26f6 and 8fa3efa.

📒 Files selected for processing (2)
  • src/components/table/__tests__/makeSelectable.test.js
  • src/components/table/makeSelectable.js

@mergify
Copy link
Contributor

mergify bot commented Feb 26, 2026

Merge Queue Status

Rule: Automatic strict merge


  • Entered queue2026-02-26 20:13 UTC
  • Checks passed · in-place
  • Merged2026-02-26 20:24 UTC · at c1de9b41718d440efb128bb471d27ad871e25761

This pull request spent 10 minutes 43 seconds in the queue, including 10 minutes 32 seconds running CI.

Required conditions to merge

@mergify mergify bot merged commit 97e633c into box:master Feb 26, 2026
7 of 8 checks passed
@mergify mergify bot removed the queued label Feb 26, 2026
@loonskai loonskai deleted the makeselectable-role-menu branch February 26, 2026 20:26
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants