MdButton: 'focus()' API method doesn't focus the button

[denver-HJS]

Bug, feature request, or proposal:

Bug(?)

What is the expected behavior?

The button should become focused after calling the API method, so that the user visually sees it's been focused and they can hit the enter key to activate the button, etc.

What is the current behavior?

Nothing happens visually, and there are no console errors output.

What are the steps to reproduce?

StackBlitz using latest npm: https://stackblitz.com/edit/angular-material2-issue-wckfr5

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

When the user makes a form control selection I would like to focus the submit button for improved UX flow.

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

C:\src\git\myProject>ng version
@angular/cli: 1.4.3
node: 7.2.1
os: win32 x64
@angular/animations: 4.4.3
@angular/cdk: 2.0.0-beta.11
@angular/common: 4.4.3
@angular/compiler: 4.4.3
@angular/core: 4.4.3
@angular/flex-layout: 2.0.0-beta.9-0da1f88
@angular/forms: 4.4.3
@angular/http: 4.4.3
@angular/material: 2.0.0-beta.11
@angular/platform-browser: 4.4.3
@angular/platform-browser-dynamic: 4.4.3
@angular/router: 4.4.3
@angular/cli: 1.4.3
@angular/compiler-cli: 4.4.3
@angular/language-service: 4.4.3
typescript: 2.5.3

Am I misunderstanding what the focus API method is meant to do?

[willshowell]

I think it does becomes focused. After .focus(), hitting ENTER does trigger a (click) handler.

And it looks like #5966 takes care of the lack of styling, but it fizzled out for some reason.

[jelbourn]

@mmalerba @crisbeto what was the status on that PR?

[crisbeto]

I never got around to implementing Miles' feedback @jelbourn and it got pushed away by other work. I'll try to get it working as per the discussion.

[denver-HJS]

Good catch, you're right, it is triggering a click handler when hitting the enter key but not the styling in that example.

I made the stackblitz match my actual implementation a little closer, and it looks like it happens when interacting with the MdAutoComplete component.

Please see the updated code: https://stackblitz.com/edit/angular-material2-issue-nbuzsd

When making the auto complete selection it should result in the button being focused, but hitting the enter key at that point doesn't trigger the keyup or click handler.

[willshowell]

@denver-HJS this is due to the autocomplete manually placing focus back on the input after a selection (L427).

https://github.com/angular/material2/blob/c3af25b827e940a4b5b458f7c4848630b4ab9e63/src/lib/autocomplete/autocomplete-trigger.ts#L422-L432

To demo this, you can see that this workaround works,

setTimeout(() => this.submitButton.focus());

As an actual solution, try responding to the autocomplete's optionSelected event instead, since that is fired after focus is moved back to the input.

[denver-HJS]

@willshowell I wasn't able to get it working using the optionSelected event, but the workaround works just fine. Since this is so specific to my use case, and you all have a handle on the styling with #5966 I'll close the issue.

Thanks!

[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.}