Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

For the simple component picker, enable keyboard navigation #5875

Open
3 of 5 tasks
maltenuhn opened this issue Jun 10, 2024 · 0 comments
Open
3 of 5 tasks

For the simple component picker, enable keyboard navigation #5875

maltenuhn opened this issue Jun 10, 2024 · 0 comments
Labels
Interface Panels, menus, editor styling

Comments

@maltenuhn
Copy link
Member

maltenuhn commented Jun 10, 2024

Problem
The simple component picker (w/out input) does not allow keyboard navigation, and keyboard inputs get processed by the editor. This means that eg pressing 'C' to jump to 'Column' puts the editor in commenting mode, which causes both annoyance ('why can't I jump to column') and confusion ('where did my inspector go').

Fixed with #5889

  • Make the editor not handle any keyb inputs, so the component picker can
  • Support arrow keys (up down left right)
  • Support Enter to apply, and Esc to exit

Left to do:

  • Support jump-to via initial letter (not case sensitive)
  • If still time in timebox, support second-letter-within-1-second (similar to other context menus in OS) - typing 'Co' should jump to column, typing 'CO(2 second pause)L' should select List, if there is no match the selection shouldn't change
liady added a commit that referenced this issue Jun 12, 2024
**Problem:**
Recent upgrade to `react-contexify` caused a regression where there was
a race condition between registering and unregistering open menus - so
that the code that ignored editor keystrokes when a menu was open was
broken

**Fix:**
Store the open menu ids in a set - to prevent a race condition with
overriding the classname on the body
This fixes the keystrokes leak and allow keyboard navigation (arrows)

<video
src="https://github.com/concrete-utopia/utopia/assets/7003853/79f630b0-5020-400f-9d4b-c2a21aa24e22"></video>

- [X] I opened a hydrogen project and it loaded
- [X] I could navigate to various routes in Preview mode

Related to #5875
@maltenuhn maltenuhn added the Interface Panels, menus, editor styling label Jun 13, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Interface Panels, menus, editor styling
Projects
None yet
Development

No branches or pull requests

1 participant