Repository navigation
⌨️ fix: Make Scope Selector Buttons Operable with Enter and Highlight the Open Profile - #192
Open
danny-avila wants to merge 1 commit into
Open
danny-avila wants to merge 1 commit into
danny-avila wants to merge 1 commit into
Conversation
… the Open Profile cmdk's root keydown cancels Enter and runs the highlighted option instead, so Enter on a plain button inside the scope selector never reached the button. Enter on Create picked the highlighted Base option and closed the selector, Enter on "Back to profiles" created a profile for the highlighted candidate, and Enter on the delete confirmation's Cancel and "Delete configuration" did nothing. Create and "Back to profiles" now stop Enter before it reaches the cmdk root, so Enter activates them like a click. The selector renders its own Radix dialog, and each view with a menu mounts its own cmdk root, so a highlight never carries from one view's options into the other's. The delete confirmation has no menu, so cmdk's key handling never reaches its buttons. It opens with focus on Cancel. The profile and create searches take focus when their view opens. The profile list highlights the open profile (or Base) through cmdk's controlled value, on every open and after going back from the create view, so Enter in the untouched search keeps the open profile instead of switching to Base. Cancelling a delete returns to the delete option it came from. The highlight's background now wins over the open profile's, so the open profile reads as highlighted when the selector opens. Before, both rules had the same specificity and the open profile's came last, which also hid the highlight on Base with no profile open and in the preview picker. Builds on the Enter analysis and keyboard tests proposed in #121.
Contributor
Author
Codex Review SummaryThis comment shows the latest Codex review activity on this pull request.
ℹ️ About Codex in GitHubYour team has set up Codex to review pull requests in this repo. Reviews are triggered when you
Codex reacts with 👀 while any review is running, comments if it has suggestions, and reacts with 👍 once all reviews finish with no findings. |
|
Codex Review: Didn't find any major issues. Already looking forward to the next diff. Reviewed commit: ℹ️ About Codex in GitHubYour team has set up Codex to review pull requests in this repo. Reviews are triggered when you
If Codex has suggestions, it will comment; otherwise it will react with 👍. Codex can also answer questions or update the PR. Try commenting "@codex address that feedback". |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Pull Request Template
Summary
Makes every button in the configuration scope selector work with Enter. Reopening the selector now highlights the open profile instead of Base. This PR supersedes #121 by @dustinhealy, written fresh on today's
main. It reuses that PR's analysis of how cmdk handles Enter, its approach of stopping Enter on the buttons left inside the cmdk root, and its keyboard tests driven by@testing-library/user-event.Root cause (from #121). The selector renders inside cmdk. cmdk's root
onKeyDowncallspreventDefault()on Enter and runs the highlighted option instead, which cancels the native click of any focused button inside it. #162 has since made the per-profile delete and activate controls and the role, group and user candidates cmdk options, so Enter already works on those. Onmainthe cause still affects these controls:mainButtons inside the menu. Create and Back to profiles stop Enter before it reaches the cmdk root (
keepEnter), so Enter activates them like a click. cmdk doesn't handle Space, so Space already worked on these buttons and isn't changed.One dialog, one cmdk root per view. The selector now renders its own Radix dialog (
ScopeDialog) instead ofCommand.Dialog, with the same overlay and content classes. The profile list and the create view each mount their own<Command>. With one shared root, cmdk re-highlights its first option (Base) as soon as the highlighted option unmounts, so going back from the create view would lose the open profile's highlight. The delete confirmation has no menu, so cmdk's key handling never reaches its Cancel and Delete configuration buttons. The confirmation opens with focus on Cancel: deleting removes every override in the profile and can't be undone, so Cancel is the safer default. Delete is one Tab away. Each search input takes focus when its view opens, so focus no longer drops to the dialog after Create or Back.Highlighting the open profile. The profile list sets cmdk's highlighted option through its controlled
value. Until the user moves the highlight, that is the open profile (or Base). This applies on every open, after going back from the create view and after a delete. Enter in the untouched search keeps the open profile and just closes the selector. Typing and the arrow keys move the highlight as before. Cancelling a delete returns to the delete option it came from. The create view's candidates are unchanged: Enter in its search still creates the highlighted candidate.A visible highlight on the open profile. In
src/styles.css, the open profile's rule (.scope-item[data-active='true'], hover background) came after the highlight's rule (.scope-item[aria-selected='true'], active background) with the same specificity. So a row that was both open and highlighted kept the hover background. Onmainthat already hid the highlight on Base when no profile was open. With the open profile now highlighted on every open, it would have hidden the highlight on most opens. The highlight's rule now comes last, so the highlighted row always gets the active background. The preview picker uses the same classes, so its current option, highlighted when the picker opens, now shows the highlight too.Not carried over from #121.
Dialogs. The create view now depends on cmdk filtering and the user search, so it stays a cmdk menu. The confirmation leaves cmdk without a second dialog.com_ui_backlabel and the Vitest config change. ✨ feat: Overhaul the Configuration Page (Wave 1) #162 made delete a cmdk option and labelled the back button, andmainalready has that Vitest config.The
@testing-library/user-eventdev dependency is carried over, now at 14.6.7.Change Type
Testing
Unit tests in
src/components/configuration/__tests__/ScopeSelector.test.tsxuse the real cmdk, Radix dialog and click-uiButton. Keys are pressed with user-event, and the server functions are mocked:onSelect) and closes.On
main, the 7 new tests fail and the 2 guards pass. Each part of the fix was also reverted on its own: removingkeepEnterfrom Create or Back, rendering the confirmation inside a cmdk root, or dropping the controlledvalueeach fails its tests.e2e/profiles.spec.tsgains a live test (E2E_LIVE=1,E2E_PROFILE_USER) that creates, keeps and deletes a user profile with the keyboard alone. It passes on this branch and fails onmainat the first Enter on Create. It also checks that the highlight can be seen: the open profile's background while it is highlighted must match Base's once Home highlights Base, and must differ from its own background once it isn't highlighted. With the old rule order the test fails at that check. The first test in that spec fails onmainbefore reaching the selector code, because#section-registration [role=note]now matches two notes. That test isn't changed here, so the new test was run on its own (-g "keyboard alone").Live check with a production build against a LibreChat backend. The configs collection was read before and after each key:
Apart from the highlighted open row, the dialog looks the same as on
mainin light and dark mode. The preview picker's highlighted current option also shows the highlight background. No console errors. Every profile created for the check was deleted afterwards.Test Configuration:
dev, MongoDB replica set.bun run build+bun server.ts).npx tsc --noEmit,npx eslint src/ e2e/ --max-warnings 0,npx prettier --checkon the changed files,bun run test:lint-rules,npx vitest run(3347 tests),bun run build,npx playwright test e2e/profiles.spec.ts -g "keyboard alone"against the live stack.Follow-up
Checklist