paper button receives 'keyboard-focus' when refocusing tab

[anthonytordillos]

If you click a paper-button, then unfocus and refocus the tab, paper-button receives the keyboard-focus class. It also looks like this happens with other elements (e.g. paper-icon-button), and it leads to a somewhat broken looking experience.

[kungufli]

I can confirm this problem, this happens on the official polymer-project website too.

[m4b]

confirmed as well; similar things occur with radio-buttons, etc., which seems especially broken.

[notwaldorf]

@cdata Sigh. I think this might also be an instance of the "focus without a mouse down is automatically a keyboard focus" issue, which is technically not super true in the "re-activate tab" case :(

[notwaldorf]

This is related to https://github.com/PolymerElements/paper-radio-button/issues/33.

[tjsavage]

This looks like it is still an issue as of merging https://github.com/PolymerElements/iron-behaviors/pull/23

@notwaldorf could you take a look?

[notwaldorf]

@tjsavage this isn't a new bug, it's been around forever (including 0.5). i think @cdata is our focus expert, unfortunately.

[tjsavage]

Quick bump on this issue

[anthonytordillos]

Ping?

[rictic]

Gentle ping on this.

[anthonytordillos]

Any update? Coming up on a year since this was filed.

[keanulee]

The reason why this still hasn't been fixed is because the platform gives us no reliable way of determining whether focus came from a mouse or keyboard (which, in Material Design, look different when focused). Currently, we rely on the state of the pointer (https://github.com/PolymerElements/iron-behaviors/blob/master/iron-button-state.html#L116), but the pointer will not be pressed when switching between tabs, so that is why it has "keyboard-focus". We are actively looking for other ways to fix this, but there doesn't seem to be any alternatives.

[MichaelScript]

Is there a reason we can't just listen for whether or not the tab is active on the window and then blur the focus? I tested this within the ready function of the paper-button element and this fixes the issue however I'm not sure where the right place for this would be or if there might be a better variation of this because I might not be thinking of other situations.

document.addEventListener('visibilitychange',function(){
    console.log("Changed");
    this.blur();
}.bind(this));

[esurface]

hitting this bug five years later. any workarounds?

[cdata]

Hey @esurface it seems unlikely that there will be significant changes to this component moving forward. It is possible that the issue could be taken up by someone in the community to be fixed. I'm happy to look at any PR someone might come up with to attempt a fix.