md-button stays focused after a click

[PaulMougel]

After clicking or touching on a <md-button>, it stays focused, both on latest Firefox, Chrome, mobile Chrome and mobile Safari (see the demo page). Only by clicking somewhere else will the button loose focus. Is it the intended behavior?

Screenshot in latest Chrome stable, on Mac Os Yosemite, on the demo page:

[epelc]

This may be intentional can any designers comment? I've seen this in bootstrap and have removed disabled it before but it may be helpful to know the last button you clicked. I'm still back and forth about it maybe it should be an option you could enable if some people want this.

[marcysutton]

There are changes to <md-button> coming. But I can say that a focus style needs to be enabled, so be very careful when disabling something like this.

[PaulMougel]

I get that the focused state has to stay enabled for a little bit, but now I get the impression that the action that the button is supposed to do (say, load more content on the page) is not finished, as the button stays "clicked".

[epelc]

I'm not saying remove the focus style. I think @PaulMougel and myself are refering to when you click a button it shouldnt have focus until you click something else. After you click it should be the same as before you clicked it.

The argument against have it like how it is now is that there may be benefits in seeing the last button you clicked easily.

[marcysutton]

Gotcha. We'll take a closer look, that does sound odd. I've just seen focus styles removed entirely for reasons like this.

[PaulMougel]

Looks like it is related to keyboard navigation: after having clicked with my mouse the button, I can tab to the next button.

[marcysutton]

It shouldn't have the focus style when you click, but the button is actually focused. That's how a native button works. There are major changes coming to <md-button>, so we'll keep this in mind.

Updated with a really basic Codepen where we can check native button focus behavior: http://codepen.io/marcysutton/pen/jDKlf

[epelc]

@PaulMougel you can make it a non styled focus where tab would still work and have the right position after a click but it wouldnt have the focused style.

I think we should come back to this after the <md-button> since @marcysutton says they will be major and this might even be fixed after.

[PaulMougel]

Alright, let's wait for the refactoring then :) Thanks a lot for the quick answers!

[marcysutton]

Apparently this is a larger issue, and quite difficult to solve cross-platform. Leaving this here for reference: https://twitter.com/patrick_h_lauke/status/530503642399666177

[mlibby]

The standard is to give focus to buttons when clicked. The default browser style for :focus is a dashed outline. The default :hover style is a darker shade in the button. The two states have very different appearances.

Two ways to resolve this issue would be:

1. have distinct :focus and :hover states.
2. turn off :focus styles until the user uses the keyboard to navigate to the element in question.

[epelc]

I also noticed the sliders work the same way. It keeps focus after you click on it until you click somewhere else. Maybe this is intentional as I've seen it on several websites too.

[plato-cambrian]

I don't mind having a click event on a button setting focus. What if I want
to press the button a lot? It's kind of nice to be able to just keep
whacking Space bar.

also if we want to auto switch focus, its nontrivial to decide what is the
new focus element.

I think the individual click handlers should be in charge of switching
focus away from the clicked button
On Nov 7, 2014 9:22 AM, "Ed Pelc" notifications@github.com wrote:

I also noticed the sliders
https://material.angularjs.org/#/demo/material.components.slider work
the same way. It keeps focus after you click on it until you click
somewhere else.

—
Reply to this email directly or view it on GitHub
#556 (comment).

[miller9904]

Also, if md-tooltip is added to the button, it stays visible while the button has focus. That is definitely not the standard.