Fix prompt keyboard navigation inside tables#718
Fix prompt keyboard navigation inside tables#718jorgemanrubia merged 5 commits intobasecamp:mainfrom
Conversation
There was a problem hiding this comment.
Pull request overview
This PR fixes keyboard navigation for prompt dropdowns (e.g., @ mentions) when used inside table cells by changing the priority of keyboard event handlers from COMMAND_PRIORITY_HIGH to COMMAND_PRIORITY_CRITICAL.
Changes:
- Updated keyboard command registration priorities in
prompt.jsfromCOMMAND_PRIORITY_HIGHtoCOMMAND_PRIORITY_CRITICALfor all key handlers (ENTER, TAB, SPACE, ARROW_UP, ARROW_DOWN) - Imported
COMMAND_PRIORITY_CRITICALfrom Lexical - Updated comments to reflect the new priority level
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
|
I like this, a simple solution, thank you @yanfroes! @samuelpecher any feedback on this? |
samuelpecher
left a comment
There was a problem hiding this comment.
LGTM; I wouldn't want to push the table handle commands down the priority list, so 👍
samuelpecher
left a comment
There was a problem hiding this comment.
This could do with a test to ensure we don't regress in the future if priorities are ever revised.
|
@zoltanhosszu @samuelpecher Just added the test! =) |
zoltanhosszu
left a comment
There was a problem hiding this comment.
Looking solid! Let's ship it :) 🚀
beec132 to
72a36d5
Compare
When a prompt (e.g., @ mentions) is open inside a table cell, arrow keys should navigate the dropdown options, not the table cells. Changed prompt key handlers from COMMAND_PRIORITY_HIGH to COMMAND_PRIORITY_CRITICAL so they run before table navigation handlers. Fixes basecamp#677
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Adds regression test for basecamp#677 to ensure arrow keys navigate prompt items when the prompt is opened inside a table cell. Verifies that prompt key handlers maintain COMMAND_PRIORITY_CRITICAL to prevent the table plugin from intercepting arrow key events.
72a36d5 to
ae248d3
Compare
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 4 out of 9 changed files in this pull request and generated no new comments.
Comments suppressed due to low confidence (2)
test/system/prompts_test.rb:114
- The assertions immediately after
find_editor.send :arrow_downmay be flaky becausesend_keysdoesn’t flush Lexical updates, and the DOM/aria-selectedstate may not be updated by the time we re-query.lexxy-prompt-menu__item. Consider wrapping the post-keypress assertions inwait_until(e.g., wait until the second item becomes selected and the prompt is still open) soflush_lexical_updatesruns before asserting.
find_editor.send :arrow_down
assert find_editor.open_prompt?, "Prompt closed after pressing arrow down. The table plugin intercepted the key event because prompt handlers are not using COMMAND_PRIORITY_CRITICAL."
prompt_items = all(".lexxy-prompt-menu__item")
refute prompt_items[0]["aria-selected"], "First item should not be selected after arrow down"
assert prompt_items[1]["aria-selected"], "Second item should be selected after arrow down - prompt handled the arrow key"
test/system/prompts_test.rb:122
- Same as above for the
:arrow_uppath: afterfind_editor.send :arrow_up, the selection/aria-selectedchanges may not be reflected immediately across drivers/CI timing. Wrapping the re-query + assertions inwait_until(waiting for the first item to regain selection) will make this system test more reliable.
find_editor.send :arrow_up
assert find_editor.open_prompt?, "Prompt should remain open after arrow up"
prompt_items = all(".lexxy-prompt-menu__item")
assert prompt_items[0]["aria-selected"], "First item should be selected after arrow up"
refute prompt_items[1]["aria-selected"], "Second item should not be selected after arrow up"
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
* origin/main: (77 commits) Version 0.8.0.beta Fix prompt keyboard navigation inside tables (#718) Bump turbo-rails to 2.0.23 and importmap-rails to 2.2.3 (#773) Build assets Add upload lifecycle events (upload-start, upload-progress, upload-end) Build assets Fix non-advancing caret Explicitely return false in Paste handler Make attachment image undraggable Test gallery ActionText rendering Handle `null` selection for isOnPreviewableImage Prevent crash on missing `img[src]` Fix pasting remove images bug Clarifying rename Add cursor-based gallery tests Allow DOM selection update when promoting an attachment upload Remove async from upload promotion function selectEnd of the last uploaded node, not the node itself Remove an empty element before a DecoratorNode on Delete/Backspace refactor `contents.insertAtCursor` ... # Conflicts: # app/assets/javascript/lexxy.js # app/assets/javascript/lexxy.js.br # app/assets/javascript/lexxy.js.gz # app/assets/javascript/lexxy.min.js # app/assets/javascript/lexxy.min.js.br # app/assets/javascript/lexxy.min.js.gz # src/nodes/action_text_attachment_upload_node.js
Fixes #677
Problem
When using @ mentions (or other prompts) inside a table cell, pressing arrow keys navigates between table cells instead of navigating the dropdown options.
Cause
Lexical's table plugin registers arrow key handlers at COMMAND_PRIORITY_HIGH during editor initialization. The prompt also registered its handlers at the same priority, but later—causing table handlers to intercept keyboard events first.
Solution
Changed prompt key handlers from COMMAND_PRIORITY_HIGH to COMMAND_PRIORITY_CRITICAL, ensuring they take precedence over table navigation when the prompt is open.
lexxy-fix-prompt-keyboard-navigation-inside-tables.mp4