Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

mat-select doesn't propagate (change) event to containing div

See original GitHub issue

Bug, feature request, or proposal:

Bug

What is the expected behavior?

mat-select as opposed to usual select does not propagate the onChange event up the hierarchy. If we have a div container for this mat-select then (change) event on the div will not be captured. Whereas, the mat-select tag itself obviously captures the change event. Also, form it is contained in updates the class to ng-dirty, but somehow the div is unable to capture the event. The usual select gives the right behavior.

What is the current behavior?

The mat-select change event must be propagated to the containing div as happens in normal select dropdown.

What are the steps to reproduce?

https://stackblitz.com/edit/angular-material2-issue-xdzlo7

What is the use-case or motivation for changing an existing behavior?

Even should propagate

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Angular- 5.2.0 Angular Material 5.2.4 Os- Linux Typescript- 2.5.3 Browser- Chrome

Is there anything else we should know?

Issue Analytics

State:
Created 5 years ago
Comments:6 (2 by maintainers)

Top GitHub Comments

4reactions

crisbetocommented, Apr 29, 2018

The change event on select is a native DOM event, whereas mat-select doesn’t have a change event at all. It has a selectionChange event which is an EventEmitter and which won’t bubble up the DOM.

3reactions

kamalSaiDdcommented, Nov 8, 2018

You need to use (selectionChange) instead of (change). (change) is deprecated from angular 6.0 Solution to this: https://github.com/angular/material2/issues/11786

Top Results From Across the Web

How can I stopPropagation when angular mat-select option ...

Wrap the mat-select with a div. That can be used to capture and stop the same click event that triggers the mat-select selection....

stopPropagation() Event Method - W3Schools

The stopPropagation() method prevents propagation of the same event from being called. Propagation means bubbling up to parent elements or capturing down to ......

mat-select change event angular 7

mat-select as opposed to usual select does not propagate the onChange event up the hierarchy. If we have a div container for this...

Overlay | Angular Material

Container inside which all overlays will render. ... This method returns the overlay container element. ... Event emitted when the position has changed....

Material Select Change Event - StackBlitz

<div class="basic-container"> ... <mat-select placeholder="Favorite food" [. (ngModel)]="selectedFood1" (change) ... <mat-hint>(change) event</mat-hint>.