fix(types): Type 'enter' and 'tab' is not assignable to type 'VOnModifiers' #13337
Conversation
WalkthroughThe changes add support for the "enter" and "tab" key modifiers in the runtime-dom directive logic. The internal Changes
Sequence Diagram(s)sequenceDiagram
participant TestSuite
participant InputElement
participant Handler
TestSuite->>InputElement: Patch onKeyup with withModifiers(handler, ['enter', 'tab'])
TestSuite->>InputElement: Dispatch keyup event with key='Enter'
InputElement->>Handler: Call handler (if key is 'Enter' or 'Tab')
TestSuite->>InputElement: Dispatch keyup event with key='Tab'
InputElement->>Handler: Call handler (if key is 'Enter' or 'Tab')
Assessment against linked issues
Poem
Note ⚡️ AI Code Reviews for VS Code, Cursor, WindsurfCodeRabbit now has a plugin for VS Code, Cursor and Windsurf. This brings AI code reviews directly in the code editor. Each commit is reviewed immediately, finding bugs before the PR is raised. Seamless context handoff to your AI code agent ensures that you can easily incorporate review feedback. Note ⚡️ Faster reviews with cachingCodeRabbit now supports caching for code and dependencies, helping speed up reviews. This means quicker feedback, reduced wait times, and a smoother review experience overall. Cached data is encrypted and stored securely. This feature will be automatically enabled for all accounts on May 16th. To opt out, configure ✨ Finishing Touches
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. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
packages/runtime-dom/__tests__/directives/vOn.spec.ts (1)
167-177: Test case properly verifies new key modifiers.The test effectively validates that the 'enter' and 'tab' modifiers work as expected. It's a good approach to test both modifiers together, confirming they can be combined correctly in a real-world scenario.
A minor suggestion: consider adding assertions that the function is NOT called when other keys are pressed, similar to how other tests in this file verify that handlers aren't invoked with incorrect inputs.
it('it should support "enter" and "tab" key modifiers', () => { const el = document.createElement('input') const fn = vi.fn() const enterHandler = withModifiers(fn, ['enter', 'tab']) patchEvent(el, 'onKeyup', null, enterHandler, null) + // Verify that other keys don't trigger the handler + triggerEvent(el, 'keyup', e => (e.key = 'a')) + expect(fn).not.toBeCalled() triggerEvent(el, 'keyup', e => (e.key = 'Enter')) expect(fn).toBeCalledTimes(1) triggerEvent(el, 'keyup', e => (e.key = 'Tab')) expect(fn).toBeCalledTimes(2) })
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
Cache: Disabled due to data retention organization setting
Knowledge Base: Disabled due to data retention organization setting
📒 Files selected for processing (2)
packages/runtime-dom/__tests__/directives/vOn.spec.ts(1 hunks)packages/runtime-dom/src/directives/vOn.ts(2 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (3)
- GitHub Check: Redirect rules
- GitHub Check: Header rules
- GitHub Check: Pages changed
🔇 Additional comments (2)
packages/runtime-dom/src/directives/vOn.ts (2)
74-84: Type definition correctly extended for 'enter' and 'tab' keys.The type definition for
keyNamesis properly updated to include 'enter' and 'tab' keys, which addresses the issue mentioned in the PR title where these types were not assignable toVOnModifiers.
93-94: Key mappings correctly implemented for 'enter' and 'tab'.The implementation correctly maps 'enter' and 'tab' to their respective string values. Unlike some other keys that require transformation (e.g., 'esc' → 'escape'), these keys map directly to themselves since
hyphenate(event.key)will convert 'Enter' and 'Tab' to lowercase.
|
I don't think #13336 should be fixed.
|
In the jsx and tsx scenarios, although events can be processed on their own, as described in the documentation, it would be better if the methods could focus more on data logic rather than dealing with the details of DOM events |
|
https://vuejs.org/guide/extras/render-function.html#event-modifiers |
|
@selicens |
Size ReportBundles
Usages
|
@vue/compiler-core
@vue/compiler-dom
@vue/compiler-sfc
@vue/compiler-ssr
@vue/reactivity
@vue/runtime-core
@vue/runtime-dom
@vue/server-renderer
@vue/shared
vue
@vue/compat
commit: |
close #13336
Summary by CodeRabbit
New Features
Tests