Skip to content

UI: Don't fire keyboard shortcuts while typing in a Monaco editor - #75684

Merged
bbovenzi merged 1 commit into
apache:mainfrom
arnavsingh0418:fix-shortcuts-in-monaco-editor
Oct 27, 2026
Merged

bbovenzi merged 1 commit into
apache:mainfrom
arnavsingh0418:fix-shortcuts-in-monaco-editor

Conversation

@arnavsingh0418

Copy link
Copy Markdown

closes: #75661

Typing "g" in the Trigger Dag dialog's Configuration JSON field toggled the grid/graph view instead of entering the letter. The same happened for any other single-key shortcut typed into a Monaco editor.

Cause: react-hotkeys-hook skips keys typed into form fields (input, textarea, select). Monaco 0.57 turns on its editContext option by default where the browser supports the EditContext API (Chrome, Edge). The element that takes input is then a plain div.native-edit-context instead of a hidden <textarea>, so the hotkey library no longer sees a form field. The grid/graph shortcut fires and its preventDefault swallows the key.

Fix: useShortcut, the wrapper every UI shortcut goes through, now passes an ignoreEventWhen that skips key events coming from inside a .monaco-editor. That restores the behavior from before EditContext, when Monaco's hidden <textarea> made the library skip these events. A caller's own ignoreEventWhen is still applied. The library keeps ignoreEventWhen in a ref and leaves it out of its options comparison, so the listener is not re-bound on every render.

Tests: two cases in useShortcut.test.tsx:

  • A key pressed inside a .monaco-editor does not fire the shortcut, and the same key pressed elsewhere does. This test fails without the fix.
  • A caller's ignoreEventWhen is still honored.

Run in airflow-core/src/airflow/ui:

  • vitest run src/hooks/useShortcut.test.tsx: 6 passed.
  • The test files of every component that uses useShortcut (SearchBar, PanelButtons, Code, CallbackLogs, LogSearchInput, Logs) plus useShortcut: 7 files, 46 tests passed.
  • eslint and prettier --check on the changed files pass, and tsc --p tsconfig.app.json passes.

Was generative AI tooling used to co-author this PR?
  • Yes (please specify the tool below)

Generated-by: Claude Code following the guidelines


  • Read the Pull Request Guidelines for more information. Note: commit author/co-author name and email in commits become permanently public when merged.
  • For fundamental code changes, an Airflow Improvement Proposal (AIP) is needed.
  • When adding dependency, check compliance with the ASF 3rd Party License Policy.
  • For significant user-facing changes create newsfragment: {pr_number}.significant.rst, in airflow-core/newsfragments. You can add this file in a follow-up commit after the PR is created so you know the PR number.

closes: apache#75661
Signed-off-by: Arnav Singh <arnavsingh08@outlook.com>
@boring-cyborg

boring-cyborg Bot commented Oct 26, 2026

Copy link
Copy Markdown

Congratulations on your first Pull Request and welcome to the Apache Airflow community! If you have any issues or are unsure about any anything please check our Contributors' Guide
Here are some useful points:

  • Pay attention to the quality of your code (ruff, mypy and type annotations). Our prek-hooks will help you with that.
  • In case of a new feature add useful documentation (in docstrings or in docs/ directory). Adding a new operator? Check this short guide Consider adding an example Dag that shows how users should use it.
  • Consider using Breeze environment for testing locally, it's a heavy docker but it ships with a working Airflow and a lot of integrations.
  • Be patient and persistent. It might take some time to get a review or get the final approval from Committers.
  • Please follow ASF Code of Conduct for all communication including (but not limited to) comments on Pull Requests, Mailing list and Slack.
  • Be sure to read the Airflow Coding style.
  • Always keep your Pull Requests rebased, otherwise your build might fail due to changes not related to your commits.
    Apache Airflow is a community-driven project and together we are making it better 🚀.
    In case of doubts contact the developers at:
    Mailing List: dev@airflow.apache.org
    Slack: https://s.apache.org/airflow-slack

@ieCecchetti ieCecchetti left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

i checked it too 🚀

@bbovenzi bbovenzi added the backport-to-v3-4-test Backport to v3-4-test label Oct 27, 2026
@bbovenzi bbovenzi added this to the Airflow 3.4.0 milestone Oct 27, 2026
@bbovenzi
bbovenzi merged commit aaba5c3 into apache:main Oct 27, 2026
80 checks passed
@github-actions

Copy link
Copy Markdown
Contributor

Backport successfully created: v3-4-test

Note: As of Merging PRs targeted for Airflow 3.X
the committer who merges the PR is responsible for backporting the PRs that are bug fixes (generally speaking) to the maintenance branches.

In matter of doubt please ask in #release-management Slack channel.

Status Branch Result
✅ v3-4-test PR Link

bbovenzi pushed a commit that referenced this pull request Oct 27, 2026
…o editor (#75684) (#75797)

closes: #75661
(cherry picked from commit aaba5c3)

Signed-off-by: Arnav Singh <arnavsingh08@outlook.com>
Co-authored-by: Arnav Singh <arnavsingh08@outlook.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

area:UI Related to UI/UX. For Frontend Developers. backport-to-v3-4-test Backport to v3-4-test

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Cannot enter letter "g" in Trigger Dag dialog, Configuration JSON field

3 participants