Skip to content

MatAutocomplete selection option event order #18650

Closed
@raygig

Description

@raygig

Feature Description

The current order of events when selecting an option from MatAutocomplete is as follows:

  1. Update the NgModel
  2. Bring focus to the autocomplete
  3. Emit select event which calls @output() optionSelected

This is the code which executes this logic.

    MatAutocompleteTrigger.prototype._setValueAndClose = 
    function (event) {
        if (event && event.source) {
            this._clearPreviousSelectedOption(event.source);
            this._setTriggerValue(event.source.value);
            this._onChange(event.source.value);
            this._element.nativeElement.focus();
            this.autocomplete._emitSelectEvent(event.source);
        }
        this.closePanel();
    };

I am proposing to call the focus() event after this.autocomplete._emitSelectEvent(event.source);

The issue is if you want to test the current selected model value in the focus() event it will be incorrect because the setting of the model happens after focus is called.

Use Case

In the focus event we are testing if the model value is blank and if so then open the panel to give suggested search items.

Metadata

Metadata

Assignees

Labels

P4A relatively minor issue that is not relevant to core functionsarea: material/autocompletefeatureThis issue represents a new feature or feature request rather than a bug or bug fix

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions