Key handling is broken in our Storybook stories. It works in examples outside Storybook, so the problem seems tied to the Storybook integration.

Describe the bug

I noticed the issue while migrating the Validation story to TypeScript. Arrow keys are not handled. I also tried with the legacy keyCode value 40 for ArrowDown and it still did not work.

• Repros on Ubuntu with Chrome and Firefox. Both fail.
• Works in ts-example outside Storybook. So this looks Storybook-specific.
• Our current implementation uses event.keyCode which is deprecated.
• On mxGraph, the same validation demo works in Firefox (checked on 2025-08-22).

Note
This might be related to not passing an explicit target node to the KeyHandler constructor in the stories.

Links

• Validation story migration PR: refactor: migrate the Guides story to TypeScript #908

  • My tests and attempts after CodeRabbit suggestions: refactor: migrate the Guides story to TypeScript #908 (review). This is a good start but this is not always working.

• mxGraph reference that works in FF: https://jgraph.github.io/mxgraph/javascript/examples/validation.html

• MDN note about keyCode deprecation: https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode#browser_compatibility

Steps to Reproduce

1. Run Storybook.
2. Open the Validation story - also reproduced on the Guides story using other keys (JS or migrated to TS).
3. Click in the canvas/story area.
4. Press arrow keys (e.g., ArrowDown).

Expected behavior

• Arrow keys are captured and handled by KeyHandler in the story.
• Behavior is consistent with ts-example and with mxGraph’s demo.

Actual behavior

• Arrow keys are not captured in Storybook stories.
• Same code works in ts-example (outside Storybook), so it’s not a core logic regression.

Environment

• OS: Ubuntu

• Browsers: Chrome and Firefox (both reproduce)

• Context:

  • Repro in Storybook stories (Validation, Guides)
  • Works in packages/examples/ts-example

Hypothesis

• Storybook isolates focus. The target element for key events might not be focused or not focusable.
• KeyHandler is created without an explicit target DOM node in stories, so it may attach to document while Storybook’s iframe steals focus.
• Use of deprecated event.keyCode may cause inconsistent behavior across browsers in modern setups. Probably not the issue here.

Important
This looks like a Storybook integration detail: focus management and explicit target for KeyHandler are likely the root causes.

If we don't succeed in making it work in Storybook, we could use an external example instead. We could implement the use case described in #716

Additional context

• The Guides story migrated to TS also reproduces the same problem in PR refactor: migrate the Guides story to TypeScript #908.
• I tried a few tweaks based on CodeRabbit recommendations but results were not conclusive yet. Further isolating focus and passing the target node explicitly seems the most promising path.

Tasks

Make it works in all stories.

Notice that the list here has been created based on the current usage of KeyHandler. Some usages are probably useless because in some stories, the KeyHandler is declared but no listener is registered.
In this case, the KeyHandler should be removed.

• DynamicToolbar.stories.ts. Remove, KeyHandler is only instantiated
• Editing.stories.js. Remove, KeyHandler is only instantiated
• Guides.stories.ts
• Indicators.stories.js. Remove, KeyHandler is only instantiated
• Label.stories.js. Remove, KeyHandler is only instantiated
• OrgChart.stories.js. Remove, KeyHandler is only instantiated
• Permissions.stories.js
• Scrollbars.stories.js. Remove, KeyHandler is only instantiated
• Toolbar.stories.ts. Remove commented code related to KeyHandler
• Tree.stories.js. Remove, KeyHandler is only instantiated
• UserObject.stories.ts. Remove, KeyHandler is only instantiated
• Validation.stories.ts fix : make the KeyHandler work in the Validation story #1027
• Window.stories.ts. Remove, KeyHandler is only instantiated