fix(components): [collapse] allow nested inputs in ElCollapseItem to … #14061
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
👋 @kinggq, seems like this is your first time contribution to element-plus.
|
pull-request-triage
bot
added
1st contribution
|
|
github-actions
bot
added
Contribution::Community
CommitMessage::Qualified
|
🧪 Playground Preview: https://element-plus.run/?pr=14061 |
|
The issue doesn't seem to be resolved. example |
|
the |
|
I don't think this issue needs to be solved, it's not a correct usage. |
btea
reviewed
Aug 24, 2023
Co-authored-by: btea <2356281422@qq.com>
|
It seems that the modifications you made can indeed solve this problem |
tolking
approved these changes
Aug 28, 2023
consultation-applio
pushed a commit
to consultation-applio/element-plus
that referenced
this pull request
Nov 10, 2023
…ement-plus#14061) * fix(components): [collapse] allow nested inputs in ElCollapseItem to handle space key * Update packages/components/collapse/src/collapse-item.vue Co-authored-by: btea <2356281422@qq.com> --------- Co-authored-by: btea <2356281422@qq.com>
|
直接在input上面添加@keydown.space.stop @keyup.space.prevent这个阻止默认事件即可. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
…handle space key
Please make sure these boxes are checked before submitting your PR, thank you!
devbranch.Description
This PR addresses an issue in the ElCollapseItem component where nested input elements within the component were unable to recognize and handle space key inputs due to a parent div capturing and preventing the event. The event handling logic has been updated to ensure that nested inputs can function as expected while still maintaining the desired behavior on the parent div. #14027
Related Issue
Fixes #14027
Explanation of Changes
Updated event handling logic on the parent div of ElCollapseItem by using .stop.prevent.self modifiers for the keypress.space.enter event. This ensures the event is only prevented when the event target is the div itself and not any child elements.
This change allows nested inputs to properly handle space key inputs while still maintaining the desired expand/collapse behavior on the parent div.