feat(platform-browser): support .prevent and .stop modifier for event bubbling#67865
Open
splincode wants to merge 1 commit intoangular:mainfrom
Open
feat(platform-browser): support .prevent and .stop modifier for event bubbling#67865splincode wants to merge 1 commit intoangular:mainfrom
.prevent and .stop modifier for event bubbling#67865splincode wants to merge 1 commit intoangular:mainfrom
Conversation
JeanMeche
reviewed
Mar 26, 2026
Comment on lines
+122
to
+156
| function parseEventName(eventName: string): {eventName: string; prevent: boolean; stop: boolean} { | ||
| const [name, ...modifiers] = eventName.split('.'); | ||
| if (modifiers.length === 0) { | ||
| return {eventName, prevent: false, stop: false}; | ||
| } | ||
|
|
||
| let prevent = false; | ||
| let stop = false; | ||
| for (const modifier of modifiers) { | ||
| if (modifier === 'prevent') { | ||
| prevent = true; | ||
| } else if (modifier === 'stop') { | ||
| stop = true; | ||
| } else { | ||
| return {eventName, prevent: false, stop: false}; | ||
| } | ||
| } | ||
|
|
||
| return {eventName: name, prevent, stop}; | ||
| } | ||
|
|
||
| function applyEventModifiers( | ||
| handler: Function, | ||
| {prevent, stop}: {prevent: boolean; stop: boolean}, | ||
| ): Function { | ||
| return (event: Event) => { | ||
| if (prevent) { | ||
| event.preventDefault(); | ||
| } | ||
| if (stop) { | ||
| event.stopPropagation(); | ||
| } | ||
| return handler(event); | ||
| }; | ||
| } |
Member
There was a problem hiding this comment.
The issues I see with this approach:
- non tree shakable
- not discoverable via ALS
- no compile checks.
I'm wondering if we should back this into the compiler directly as explored in #67076.
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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
4 participants
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.
PR Checklist
Please check if your PR fulfills the following requirements:
PR Type
What kind of change does this PR introduce?
What is the current behavior?
Issue Number: #4059
Motivation
Angular currently allows an ambiguous case for event binding on a component host: if an event name matches an
@Output, but the same DOM event also bubbles from inside the component template, the parent handler may be attached as a fallback DOM listener even when the expected behavior is to subscribe only to the component output.This makes the behavior non-obvious and harder to debug.
In this case,
(change)on the component host may work through the fallback DOM mechanism because the nativechangeevent bubbles, even though the component does not declare an explicit change output.The behavior feels "magical" and does not clearly signal an API issue in the component.
What is the new behavior?
Does this PR introduce a breaking change?