Inconsistent button/dropdown outline

[acshef]

How come regular buttons don't remove the focus outline, but dropdown buttons do? The difference is jarring, especially when using split button dropdowns. (This affects v3 and v4.)


I'm curious: what's the reason for this design?

[cvrebert]

Presumably @mdo thinks the focus outline on a dropdown menu button after a dropdown menu is closed either is confusing or looks bad.
See 8bb7def#diff-69b9ec7c8eab7fe0e63a39c7bb88e003R24

[acshef]

That's a fair design preference, although it's still inconsistent :) Regular buttons retain the focus outline after being clicked. I see that on the dropdown toggle button element, the aria-expanded attribute changes depending on whether the dropdown is expanded or not. Since [attribute=value] is only a CSS Level 2 selector, would it be preferrable to conditionally hide the focus outline based on that?

[patrickhlauke]

would it be preferrable to conditionally hide the focus outline based on that

could you propose a tweak/show an example of what you mean (a jsfiddle or similar would be great). this is definitely a thorny area that we'd like to address at some point...

[acshef]

http://jsfiddle.net/k8L0u7os/
I've drummed up some examples, but I'd have to better understand it from @mdo's standpoint. The comment says

Prevent the focus on the dropdown toggle when closing dropdowns

Why is that wanted? When the dropdown is closed, the focus does technically go back to the dropdown button. So why mask it?

[patrickhlauke]

because designers usually don't like it, is probably the short answer

[mdo]

because designers usually don't like it, is probably the short answer

There was feedback long ago that it was awkward to emphasize something that was recently closed—in this case our dropdown menus. I'd rather we be consistent though and really like the hidden when open example in that jsfiddle.