Material: 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" [email protected] 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
https://github.com/angular/material/issues/556#issuecomment-62159094.

[miller9904]

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

[marcysutton]

<md-tooltip> is a different component and does not necessarily need to follow the same behavior. The focus style on buttons is something we will continue to work on, thanks for the input.

[albertboada]

+1 for differentiating :focus styles from the :hover ones, at least

[marcysutton]

Focus styles are covered in a different issue: https://github.com/angular/material/issues/142

[irfanka]

bump

[caok2709]

Does anyone know how to disable md-button hover effect?

[vas1468]

 .md-button:not([disabled]):hover {
    background-color: transparent;
  }

[ananyaojha]

What's the exact solution to this issue? I'm still getting this in my application. When switching tab and coming back to application, button is still showing active.

[simhnna]

@marcysutton I think this issue should still be open. The linked issue has been closed without a resolution to this one...

[marcysutton]

@simhnna I don't work on Angular Material anymore, but I'd recommend looking into the proposed :focus-visible CSS selector or the What Input JavaScript library. I lovingly refer to this problem as Button focus hell because it isn't easy to solve in a way that supports all users. However, the aforementioned projects can help provide more styling hooks based on the user's input modality.

[AngelQuirogaM]

For the ppl that still wants to get rid of it in the last versions of Angular Material (5.2.3 in my project) you can do the next:
.mat-button:focus .mat-button-focus-overlay { background-color: transparent; }

[Splaktar]

@AngelQuirogaM Please submit Angular Material questions here and issues here. This repo is for AngularJS Material.

[marcysutton]

@AngelQuirogaM the problem with that CSS is you're hiding the visible focus state, which means keyboard users can't see where we are on the screen (a huge accessibility/usability problem). It doesn't get at the core issue, which is that mouse users don't like the persistent focus state. See my above comment for a better way forward.