search

PolymerElements / paper-input

A Material Design text field
https://www.webcomponents.org/element/PolymerElements/paper-input
130 stars 162 forks source link

paper-input breaks tabindex contract #667

Open rslawik opened 5 years ago

rslawik commented 5 years ago

Description

<paper-input> does not respect tabindex contract.

https://codepen.io/rileybauer/pen/vaeMaQ (by @rileyjbauer) shows that tabIndex property and tabindex attribute can go out of sync. It looks like the tabIndex property is generated by Polymer: https://imgur.com/sSSBMFx.

Expected outcome

The property and the attribute are in sync.

For example:

$0.tabIndex = -1;
$0.getAttribute('tabindex'); // returns -1

and

$0.setAttribute('tabindex', 0);
$0.tabIndex; // returns 0

Actual outcome

Initial value of $0.tabIndex is undefined.

Changing the property does not affect the attribute. For example:

$0.getAttribute('tabindex'); // returns 0
$0.tabIndex = -1;
$0.getAttribute('tabindex'); // returns 0

Live Demo

https://codepen.io/rileybauer/pen/vaeMaQ (by @rileyjbauer)

Steps to reproduce

Steps are explained in the live demo.

Additionally try interacting with <paper-input> directly from the console:

$0.tabIndex; // returns undefined
$0.getAttribute('tabindex'); // returns 0
$0.tabIndex = -1;
$0.getAttribute('tabindex'); // returns 0

Browsers Affected