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

[UX-Feature] Filtering node types selects the first result by default [and inserts it by hitting enter] #3031

Open
putzwasser opened this issue Feb 19, 2022 · 3 comments
Labels
Feature Label to mark the change as feature Keyboard UI & UX

Comments

@putzwasser
Copy link

Description

When you filter for node types the creation/insert dialog it would be nice if the dialog would automatically highlights the first filter result.

image

In this case »Text/Bild Kombination«.

If you’d hit enter it would "instantly" insert the currently selected node type (in this case) below node type, which you clicked on to spawn the dialog.

"Bonus"

Selecting the other filtered ones via the arrow keys would be nice. But that would mean:

  1. arrow keys are just for navigation between the nodes, you couldn’t move the cursors in the input field anymore
  2. you could only move the cursor by clicking
  3. you could only add characters or remove all of them until (using backspace) until you get to the point you wanted to edit

I would be fine with that limitation.

@markusguenther markusguenther added UI & UX Feature Label to mark the change as feature labels Feb 23, 2022
@mhsdesign
Copy link
Member

i would expect this ux behavior:

  • type bil
  • nodes are filtered, first item in list is semi highlight selected so enter works
  • arrow keys and focus still is in the input field.
  • press tab to move out of the input field and then use arrow keys for selecting. (enter would save and close)
  • shift tab to move back into the search bar.

escape at anytime will close this window.

@danielkestler
Copy link
Contributor

We could also open this dialog with Cmd + K like all the cool apps do.

@Sebobo
Copy link
Member

Sebobo commented Jul 5, 2022

The search field should also be autofocused when the dialog opens.

danielkestler pushed a commit to danielkestler/neos-ui that referenced this issue Jul 6, 2022
…gation, autofocusing filter input and node type selection, see neos#3031
markusguenther added a commit that referenced this issue Nov 16, 2022
* FEATURE: Improvements to node type insertion screen for keyboard navigation, autofocusing filter input and node type selection, see #3031

* BUGFIX: Fix code style issues

* TASK: More prominent filter input position and styling

* TASK: Fix modal dialogs position from the top to prevent jumping if content size changes

* BUGFIX: Use valid icon size

* BUGFIX: reduce maximum amount of nodetypes

* TASK: make focused nodetype selection more robust

Co-authored-by: Daniel Kestler <>
Co-authored-by: Markus Günther <info@unikka.de>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Feature Label to mark the change as feature Keyboard UI & UX
Projects
None yet
Development

No branches or pull requests

5 participants