fix : make the KeyHandler work in the Validation story by LOUISNOYEZ · Pull Request #1027 · maxGraph/maxGraph

LOUISNOYEZ · 2026-03-24T13:44:58Z

PR Checklist

Addresses an existing open issue: closes #<the_issue_number_here>. If not, explain why (minor changes, etc.).
You have discussed this issue with the maintainers of maxGraph, and you are assigned to the issue.
The scope of the PR is sufficiently narrow to be examined in a single session. A PR covering several issues must be split into separate PRs. Do not create a large PR, otherwise it cannot be reviewed and you will be asked to split it later or the PR will be closed.
I have added tests to prove my fix is effective or my feature works. This can be done in the form of automatic tests in packages/core/_tests_ or a new or altered Storybook story in packages/html/stories (an existing story may also demonstrate the change).
I have provided screenshot/videos to demonstrate the change. If no releavant, explain why.
I have added or edited necessary documentation, or no docs changes are needed.
The PR title follows the "Conventional Commits" guidelines.

Overview

In stories involving keyboard events, they don't seem to be registered and propagated to the graph container, and are thus not handled.
This pull request is intended to cover #910, although this issue is present on all stories which involve the handling of keyboard events by the graph.

Analysis

In the current stories involving keyboard events such as the Validation story, keyboard events do not seem to be detected/propagated to the graph container. I believe this is because the container HTML element linked to the graph has no tabindex attribute.
This was NOT required by the initial mxgraph example. I believe this is because in the mxgraph example, the container HTML div is the ONLY element on the page. I suppose in that case it might get focused by default and directly propagate keyboard events, but in storybook, multiple UI elements are focusable and have tabindex attributes.
The fix consists in setting the tabindex attribute of the container div, and registering a click event listener to transfer the focus to the container when it is clicked for ease of use. The validation story now works as expected.

Notes

It doesn't seem sufficient to set the tabindex attribute and focus callback on parent HTML elements of the graph container.
This affects all stories dependant on keyboard events displayed in storybook.
I've added no demonstration video, which don't illustrate well the 'absence' of event.
The correct behavior can be tested in the Validation story.

Keywords

Covers #910

Summary by CodeRabbit

New Features
- Validation UI clarified: description now states the graph is validated after each change and displays errors when invalid; guidance added for deleting selected cells with the DELETE key.
Accessibility
- Graph container is keyboard-focusable and now receives focus when clicked, improving keyboard interaction and navigation.

coderabbitai · 2026-03-24T13:45:11Z

Walkthrough

Validation story text and interaction were changed: description now states validation runs after each change and shows errors for invalid graphs; instructions to delete selected cells with the [DELETE] key were added; a TODO about DELETE behavior was removed; the graph container is made keyboard-focusable (tabindex="0") and is focused on click. (47 words)

Changes

Validation story updates

Layer / File(s)	Summary
Description / UX copy `packages/html/stories/Validation.stories.ts`	Story description updated to state validation occurs after each change, an error message is shown when the graph is invalid, and to use the `[DELETE]` key to remove selected cells.
Interaction / Accessibility wiring `packages/html/stories/Validation.stories.ts`	Graph container given `tabindex="0"` and a click handler that calls `container.focus()` was added so the container can receive keyboard focus.
Comment adjustment `packages/html/stories/Validation.stories.ts`	Minor comment text changed (plural → singular) near source-node multiplicity; no runtime behavior change.
Cleanup `packages/html/stories/Validation.stories.ts`	Removed a TODO comment about DELETE-key behavior; no key-handler logic was added or modified beyond focusing the container.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Possibly related PRs

feat: allow to pass more null and undefined to Multiplicity #914: Modifies the same packages/html/stories/Validation.stories.ts and touches keyboard/keystroke handling and story interaction.

Suggested labels

bug

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description check	✅ Passed	The description provides a comprehensive overview with problem analysis, solution explanation, and addresses all required checklist items and sections, though no screenshot/video was provided (with explanation).
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Title check	✅ Passed	The title correctly describes the main fix: making the KeyHandler work in the Validation story by making the graph container focusable and enabling keyboard event propagation.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

sonarqubecloud · 2026-03-24T13:46:10Z

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

coderabbitai

🧹 Nitpick comments (1)

packages/html/stories/Validation.stories.ts (1)
186-188: Consider focusing the iframe window before focusing the container

In Storybook iframe scenarios, container.focus() alone can still be flaky for keyboard delivery. Add window.focus() in the same click handler for better reliability.
Suggested patch
-  container.addEventListener('click', () => {
-    container.focus();
-  })
+  container.addEventListener('click', () => {
+    window.focus();
+    container.focus();
+  });
Based on learnings: "KeyHandler issues in Storybook are due to iframe isolation - ... ensure the iframe window has focus by calling window.focus() and focusing the target element in the preview configuration or story setup."

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 05861f1c-e2e2-4b42-91c9-21be26ab003b

📥 Commits

Reviewing files that changed from the base of the PR and between 24357a7 and 6717525.

📒 Files selected for processing (1)

packages/html/stories/Validation.stories.ts

…ts_to_graph_container

sonarqubecloud · 2026-05-04T15:51:43Z

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

sonarqubecloud · 2026-05-04T15:57:16Z

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

redfish4ktc

LGTM thanks.

fix(stories) : make graph container focusable

6717525

LOUISNOYEZ marked this pull request as ready for review March 24, 2026 13:46

coderabbitai Bot reviewed Mar 24, 2026

View reviewed changes

tbouffard mentioned this pull request May 4, 2026

KeyHandler does not work in Storybook stories #910

Open

13 tasks

redfish4ktc added 4 commits May 4, 2026 17:30

fix lint errors

a43021d

Merge branch 'main' into fix(stories)/propagate_stories_keyboard_even…

8bb6e9b

…ts_to_graph_container

Remove out-of-date comments

2ff86d2

Improve the description of the story displayed on top

6361b3b

Apply container setting right after it is created to ease reading

f175d7d

redfish4ktc approved these changes May 5, 2026

View reviewed changes

redfish4ktc changed the title ~~fix(stories) : make graph container focusable~~ fix : make the KeyHandler work in the Validation story May 5, 2026

redfish4ktc merged commit 1865471 into maxGraph:main May 5, 2026
10 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix : make the KeyHandler work in the Validation story#1027

fix : make the KeyHandler work in the Validation story#1027
redfish4ktc merged 6 commits intomaxGraph:mainfrom
LOUISNOYEZ:fix(stories)/propagate_stories_keyboard_events_to_graph_container

LOUISNOYEZ commented Mar 24, 2026 •

edited by coderabbitai Bot

Loading

Uh oh!

coderabbitai Bot commented Mar 24, 2026 •

edited

Loading

Uh oh!

sonarqubecloud Bot commented Mar 24, 2026

Uh oh!

coderabbitai Bot left a comment

Uh oh!

sonarqubecloud Bot commented May 4, 2026

Uh oh!

sonarqubecloud Bot commented May 4, 2026

Uh oh!

redfish4ktc left a comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

LOUISNOYEZ commented Mar 24, 2026 • edited by coderabbitai Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

PR Checklist

Overview

Analysis

Notes

Keywords

Summary by CodeRabbit

Uh oh!

coderabbitai Bot commented Mar 24, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Estimated code review effort

Possibly related PRs

Suggested labels

Uh oh!

sonarqubecloud Bot commented Mar 24, 2026

Quality Gate passed

Uh oh!

coderabbitai Bot left a comment

Choose a reason for hiding this comment

Uh oh!

sonarqubecloud Bot commented May 4, 2026

Quality Gate passed

Uh oh!

sonarqubecloud Bot commented May 4, 2026

Quality Gate passed

Uh oh!

redfish4ktc left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

LOUISNOYEZ commented Mar 24, 2026 •

edited by coderabbitai Bot

Loading

coderabbitai Bot commented Mar 24, 2026 •

edited

Loading