Strange focus behaviour for dynamic matMenu content

[skappler]

Bug, feature request, or proposal:

Bug

What is the expected behavior?

No menu item should be selected automatically

What is the current behavior?

I have a matMenu which contains an input field which can be used to filter the menu items. After entering the first character of the filter string, the input loses focus and one of the menu items is selected. After re-focussing the input and typing more, it behaves as expected

What are the steps to reproduce?

See this plunker http://plnkr.co/edit/dc3vNd4viVg2jM6Errtm?p=preview

Is there anything else we should know?

It worked on angular 2.4.5 and material 2.0.0-beta.1
Was broken after upgrading to 4.4.4 and beta.12

[julianobrasil]

As a workaround, you can do something like the code bellow as soon as the filter value change:

@ViewChild(MatInput) input = MatInput;

...

setTimeout(() => this.input._elementRef.nativeElement.focus(), 200);

Plunk: http://plnkr.co/edit/hCg5lVZ1U5OFek31Vr0j?p=preview

[skappler]

Thanks for the suggestion. I built a similar workaround, binding the focus() call to the onBlur event of the input

[crisbeto]

Menus aren't really meant to be used for filtering, that's why focus ends up being stolen away from the input. I think what you're looking for is something like this which will be added to mat-select. If you really want to continue using a menu for it, you can go with the suggestion from @julianobrasil or create a custom menu panel by implementing the MatMenuPanel interface: https://github.com/angular/material2/blob/master/src/lib/menu/menu-panel.ts#L13.

[cfremgen]

Since the referenced PR looks to be dead, here's what I came up with:

<mat-menu #layoutsMenu="matMenu">
    <mat-form-field>
        <input #searchInput matInput (blur)="searchInput.focus()"
            (click)="$event.stopPropagation()">
    </mat-form-field>
</mat-menu>

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}