Docs: Prevent JSON tree control from swallowing keyboard events when not in focus

[takashi-kasajima]

Closes #31092

What I did

• Updated JsonNodes to only apply the change by clicking the enter key if the form is focused

Checklist for Contributors

Testing

The changes in this PR are covered in the following automated tests:

• stories
• unit tests
• integration tests
• end-to-end tests

Manual testing

This section is mandatory for all contributions. If you believe no manual test is necessary, please state so explicitly. Thanks!

1. Run in the code directory by yarn storybook:ui
2. Open Storybook in your browser
3. Access the story ADDONS/docs/blocks/Controls/JsonNodes
4. Try focusing the link says Confirm the link works by pressing enter key and confirm it opens a link -- this ensures the input with the value value doesn't block keyboard

5. Press [+] button and open a form to add another prop to the object

6. Focus on the link again and confirm it opens a link by pressing enter key
7. Click on the function prop object and turn it to the edit mode

8. Focus on the link again and confirm it opens a link by pressing enter key
9. Confirm each input submits a new value by clicking enter if it's focused

Documentation

• Add or update documentation reflecting your changes
• If you are deprecating/removing a feature, make sure to update
  MIGRATION.MD

Checklist for Maintainers

• When this PR is ready for testing, make sure to add ci:normal, ci:merged or ci:daily GH label to it to run a specific set of sandboxes. The particular set of sandboxes can be found in code/lib/cli-storybook/src/sandbox-templates.ts

• Make sure this PR contains one of the labels below:

  Available labels

  • bug: Internal changes that fixes incorrect behavior.
  • maintenance: User-facing maintenance tasks.
  • dependencies: Upgrading (sometimes downgrading) dependencies.
  • build: Internal-facing build tooling & test updates. Will not show up in release changelog.
  • cleanup: Minor cleanup style change. Will not show up in release changelog.
  • documentation: Documentation only changes. Will not show up in release changelog.
  • feature request: Introducing a new feature.
  • BREAKING CHANGE: Changes that break compatibility in some way with current major version.
  • other: Changes that don't fit in the above categories.

🦋 Canary release

This PR does not have a canary release associated. You can request a canary release of this pull request by mentioning the @storybookjs/core team here.

core team members can create a canary release here or locally with gh workflow run --repo storybookjs/storybook canary-release-pr.yml --field pr=<PR_NUMBER>

Greptile Summary

Fixed keyboard event handling in JSON tree editor to prevent Enter key from triggering updates when not focused on inputs, improving accessibility and form interactions.

• Updated JsonNodes.tsx to only process Enter key events when form elements are explicitly focused
• Added new test story JsonNodes.stories.tsx to validate keyboard navigation and link activation
• Fixed issue where Enter key was being incorrectly captured by JSON tree editor, blocking link activation
• Modified event handling in JsonAddValue, JsonFunctionValue, and JsonValue components
• Improved keyboard accessibility by ensuring proper focus management for form controls

[greptile-apps]

_{2 files reviewed, 1 comment
Edit PR Review Bot Settings | Greptile}

[greptile-apps]

style: Consider moving story under 'Addons/Docs/Controls' to match standard Storybook hierarchy

[storybook-app-bot]

Package Benchmarks

^{Commit: b11127c, ran on 30 June 2025 at 13:35:58 UTC}

No significant changes detected, all good. 👏

[nx-cloud]

View your CI Pipeline Execution ↗ for commit 4215288.

Command	Status	Duration	Result
nx run-many -t build --parallel=3	✅ Succeeded	1m 17s	View ↗

---

☁️ Nx Cloud last updated this comment at 2025-06-25 15:38:12 UTC