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

Feature request: enable TAB key navigation inside nodes #325

Open
luhof opened this issue Oct 24, 2023 · 0 comments
Open

Feature request: enable TAB key navigation inside nodes #325

luhof opened this issue Oct 24, 2023 · 0 comments
Labels
enhancement New feature or request

Comments

@luhof
Copy link

luhof commented Oct 24, 2023

When working with a few nodes that have multiple input values, we have to click in each input to modify them one by one and TAB key doesn't work. This can get tiresome, and can frustrate users who need such accessibility features.

Expected behavior:

  • I have a graph with multiple connected nodes, each node having a few input fields (text, number, dropdowns…)
  • I select one input and fill it.
  • I press the TAB key to go to the next input
  • The next input in the list (next selectable element in the DOM or according to tabindex) is focused and the graph translated to center to the next input element if needed.
  • I press Shift + TAB key to go to the previous input
  • The previous input in the list (previous selectable element in the DOM or according to tabindex) is focused and the graph translated to the next input element if needed.

Current behavior

  • I have a graph with multiple connected nodes, each node having a few input fields (text, number, dropdowns…)
  • I select one input and fill it.
  • I press the TAB key to go to the next input
  • Nothing happens

Additional details

  • I noticed the tab key is explicitly disabled (both in v2 and v3) https://github.com/newcat/baklavajs/blob/master/packages/baklavajs-plugin-renderer-vue/src/components/Editor.vue#L323C13-L323C33
  • When not disabling the key, using the tab key indeed goes to the next input element but the window will automatically scroll to the focused element  (instead of translating the background and the graph) and will break the layout.
  • I managed to hack around the issue by redefining the keyDown function and re-writing the "focus to the next/previous element" to manually focus() with preventScroll option to true, so user can still use the tab key but it won't scroll to the element.

Sorry for eventual english mistakes, let me know if any information is missing :)
Have a nice day!

@newcat newcat added the enhancement New feature or request label Jan 1, 2024
@newcat newcat added this to V2 Apr 9, 2024
@newcat newcat moved this to Backlog in V2 Apr 9, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
Status: Backlog
Development

No branches or pull requests

2 participants