Material Dropdown Select not working with Angular form

[e-belair]

I'm using StringSelectionOptions on a controlGroup form. Then when I try to select a value, the value is set in the component but the showed value remains the old one on screen.

The problem also occurs on the AngularDart Gallery (try the Single Selection w/ Angular Forms).

In component: final genreOptions = StringSelectionOptions(Genre.genres);

class Genre {
  @JsonKey(name: 'genre_id')
  int id;
  @JsonKey(name: 'genre_lib', nullable: false)
  String libelle;
  @override
  String toString() => libelle;
  Genre(this.id, this.libelle);
  static List<Genre> get genres => [Genre(1, 'Monsieur'), Genre(2, 'Madame')];
}

In the template:

<material-dropdown-select
        #genre
        id="genre"
        buttonText="{{model.interlocuteur.genre}}"
        [(ngModel)]="model.interlocuteur.genre"
        ngControl="genre"
        [options]="genreOptions"
        class="dropdown-align-with-text">
</material-dropdown-select>

[e-belair]

I think it's a chrome extension that break the behavior: https://chrome.google.com/webstore/detail/transover/aggiiclaiamajehmlfpkjmlbadmkledi

[TedSander]

Chrome extensions are not guaranteed to work well with all web technologies. They inject scripts, and can change the DOM. We don't guarantee that this widget library will work with every chrome extension.