paper-button in IE is bold for un-focused and regular width for focused

miztroh-zz commented 8 years ago

Left: IE 11.0.10240.16431 is left Right: Chrome 46.0.2490.71 m (64-bit) Both on Windows 10.

paper-button

L-u-k-e commented 8 years ago

I have the same issue on IE 11. I'm on Windows 7.

Checking the console reveals that the buttons are incorrectly receiving the .keyboard-focus class by default.

My guess is that a call to toggle() somewhere turns it off when it actually gets focused.

L-u-k-e commented 8 years ago

I did some logging in iron-button-behavior.html and the focus state is being correctly defaulted to false.

The issue is in paper-button-behavior.html:

observers: [
  '_calculateElevation(focused, disabled, active, pressed, receivedFocusFromKeyboard)',
  '_computeKeyboardClass(receivedFocusFromKeyboard)'
],
...
 _computeKeyboardClass: function(receivedFocusFromKeyboard) {
  this.classList.toggle('keyboard-focus', receivedFocusFromKeyboard); // <- Right Here
},

The observer uses on this.classList.toggle() BUT the second boolean parameter isn't supported in IE / Opera 12-

If you swap out this.classList.toggle() with the utility function Polymer provides for the same purpose: this.toggleClass(), everything works fine.

I'm going to submit a pull request over on https://github.com/PolymerElements/paper-behaviors

L-u-k-e commented 8 years ago

My pull request was merged with paper-behaviors.

So, this can be closed now.

PolymerElements / paper-button

paper-button in IE is bold for un-focused and regular width for focused #64