feat(ui5-button): make click button preventable #11318
Merged
Conversation
This file contains hidden or 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
nnaydenow
requested review from
ilhan007,
pskelin,
tsanislavgatev and
vladitasev
vladitasev
approved these changes
Apr 30, 2025
Collaborator
|
🎉 This PR is included in version v2.10.0-rc.3 🎉 The release is available on v2.10.0-rc.3 Your semantic-release bot 📦🚀 |
This was referenced May 21, 2025
nnaydenow
added a commit
that referenced
this pull request
Jun 6, 2025
) The `ui5-button` component currently has a click event listener attached to its root element. This listener prevents the native click event from propagating and instead triggers a custom event. However, there's an issue: when the `ui5-button` has a visible border defined on the custom element, clicking that border can trigger a native click event. This happens because only the root element inside the Shadow DOM is observed, not the host element itself. This PR resolves the issue by adding a click event handler to the host element as well, ensuring consistent event behavior regardless of where on the button the user clicks. Issue is introduced with: #11318 Fixes: #11556
1 task
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.
Currently, the click event on the
ui5-buttonis the native click event from the user interaction. This creates some problems. One main issue is that the click event cannot be prevented because the event handler in the template is always attached first. This means that theisPreventedflag is missing if the event is prevented during the bubble phase.A bigger problem happens when the
ui5-buttonhastype="Submit"and is inside a HTML form element. In this case, each time the button is clicked, the form is submitted, even if the click event is prevented.This pull request fixes the issue by changing the click event to a
CustomEvent, instead of the nativeEvent. In most cases, onlyevent.targetorevent.currentTargetare used, and no other event details are usually needed. To provide backward compatibility the new custom event includes the original native event inside itse.detail.originalEvent, so users can still access the original event if needed.Fixes: #11103
Fixes: #9830