Skip to content

[backport cloud/1.37] fix: Consistent keydown handling for EditableText and TagsInput escape key#8238

Merged
DrJKL merged 1 commit intocloud/1.37from
backport-8204-to-cloud-1.37
Jan 22, 2026
Merged

[backport cloud/1.37] fix: Consistent keydown handling for EditableText and TagsInput escape key#8238
DrJKL merged 1 commit intocloud/1.37from
backport-8204-to-cloud-1.37

Conversation

@DrJKL
Copy link
Contributor

@DrJKL DrJKL commented Jan 22, 2026

Backport of #8204 to cloud/1.37.

Cherry-picked merge commit 7b701ad07b1c34d121448e21d6f8b5c13ef07d73.

Original PR Summary

This PR improves keyboard event handling consistency and fixes an issue where pressing Escape in nested input components would unintentionally close parent modals/dialogs.

Changes

  • EditableText keyup → keydown Migration: Changed @keyup.enter to @keydown.enter and @keyup.escape to @keydown.escape for more consistent and responsive feedback
  • Updated corresponding unit tests to use keydown triggers

Note: The TagsInput escape key handling changes from the original PR are not included in this backport because the TagsInput component (#8066) was added after the cloud/1.37 branch was created.

┆Issue is synchronized with this Notion page by Unito

…e key (#8204)

## Summary

This PR improves keyboard event handling consistency and fixes an issue
where pressing Escape in nested input components would unintentionally
close parent modals/dialogs.

## Changes

### Keyboard Event Fixes

**TagsInput Escape Key Handling**
- Added `@keydown.escape.stop` handler to `TagsInputInput.vue` to
prevent Escape from bubbling up and closing parent modals
- The handler blurs the input and exits editing mode without propagating
the event

**EditableText keyup → keydown Migration**
- Changed `@keyup.enter` to `@keydown.enter` and `@keyup.escape` to
`@keydown.escape`
- Using `keydown` is more consistent with how other UI frameworks handle
these events and provides more responsive feedback
- Updated corresponding unit tests to use `keydown` triggers

### Why keydown over keyup?

- `keydown` fires immediately when the key is pressed, providing faster
perceived response
- Better consistency with browser/OS conventions for action triggers
- Prevents default behaviors (like form submission) more reliably when
needed
- Aligns with other keyboard handlers in the codebase

## Testing

- Updated `EditableText.test.ts` to use `keydown` events
- Updated `NodeHeader.test.ts` to use `keydown.enter`
- Manual testing: Escape in TagsInput no longer closes parent modal

## Checklist

- [x] Unit tests updated
- [x] Keyboard event handlers consistent
- [x] No breaking changes to component API

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-8204-fix-Consistent-keydown-handling-for-EditableText-and-TagsInput-escape-key-2ef6d73d365081f0ac6bed8bcae57657)
by [Unito](https://www.unito.io)
@DrJKL DrJKL requested a review from a team as a code owner January 22, 2026 02:21
@DrJKL DrJKL added the backport Backporting a PR onto a release candidate label Jan 22, 2026
@coderabbitai
Copy link
Contributor

coderabbitai bot commented Jan 22, 2026

Important

Review skipped

Auto reviews are limited based on label configuration.

🚫 Review skipped — only excluded labels are configured. (1)
  • backport

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.


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

@dosubot dosubot bot added the size:S This PR changes 10-29 lines, ignoring generated files. label Jan 22, 2026
@github-actions
Copy link

github-actions bot commented Jan 22, 2026

🎨 Storybook Build Status

Build completed successfully!

⏰ Completed at: 01/22/2026, 02:23:05 AM UTC

🔗 Links


🎉 Your Storybook is ready for review!

@github-actions
Copy link

github-actions bot commented Jan 22, 2026

🎭 Playwright Tests: ⚠️ Passed with flaky tests

Results: 498 passed, 0 failed, 4 flaky, 8 skipped (Total: 510)

❌ Failed Tests

📊 Browser Reports
  • chromium: View Report (✅ 488 / ❌ 0 / ⚠️ 3 / ⏭️ 8)
  • chromium-2x: View Report (✅ 2 / ❌ 0 / ⚠️ 0 / ⏭️ 0)
  • chromium-0.5x: View Report (✅ 1 / ❌ 0 / ⚠️ 0 / ⏭️ 0)
  • mobile-chrome: View Report (✅ 7 / ❌ 0 / ⚠️ 1 / ⏭️ 0)

@DrJKL DrJKL merged commit 7faf8e0 into cloud/1.37 Jan 22, 2026
33 checks passed
@DrJKL DrJKL deleted the backport-8204-to-cloud-1.37 branch January 22, 2026 03:33
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

backport Backporting a PR onto a release candidate size:S This PR changes 10-29 lines, ignoring generated files.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants