Skip to content

Input change event bubbling into custom component change event #13997

@GiuseppePiscopo

Description

@GiuseppePiscopo

I'm submitting a ... (check one with "x")

[x] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Current behavior
A custom component exposes an event named change: @Output() change = new EventEmitter<MyEventArg>(true);. Component contains a (reactive) form, which in turn holds an <input> node whose (change) event is not bound to any handler.
When input loses its focus, e.g. after user types in then tabs or clicks away, the custom component change event is fired, receiving a JS Event object as passed argument, totally unrelated to MyEventArg type. It seems like the inner input change event, while bubbling up, gets caught and handled by custom component change event.

Expected behavior
When input loses its focus, the input change event should not be caught by custom component. So custom change event should not fire unexpectedly, with unwanted arguments.

Minimal reproduction of the problem with instructions
See plunk at https://plnkr.co/edit/M8KSb62Tqh7bT01PTYJ3?p=preview.
Anyway, it is enough to:

  1. define a custom component wrapping an input,
  2. define a change output event on custom component,
  3. bind custom component change event to some external handler
  4. then type into input and let input lose focus.

What is the motivation / use case for changing the behavior?
I'd like to be able to name the change event on a custom component as change, and not something else like changed or myComponentChange. By the way, that change name is also used in the official angular tutorial on custom component.

Please tell us about your environment:
It should not matter at all, just in case: Win 10 64bit, npm 3.9.5

  • Angular version: 2.4.2

  • Browser: Tried on Chrome 55.0.2883.87 m

  • Language: TypeScript 2.0.6

  • Node (for AoT issues): node --version =

I tried searching on the web for any "reserved" event names, but instead I found an official doc page using that name for a custom component. I tried searching among the issues for anything similar, but it was not easy to refine search with terms like "change" and "event", but on first result pages could not find anything.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions