dart-archive / polymer_elements

https://pub.dartlang.org/packages/polymer_elements
BSD 3-Clause "New" or "Revised" License
24 stars 17 forks source link

Autocomplete disabled for <paper-input> #126

Closed jonboj closed 7 years ago

jonboj commented 8 years ago
Environment/Code

Ubuntu 15.10, Builds with dart2js, Chrome 49

html <paper-input autocomplete="given-name">First name</paper-input>

What is expected

When the input form is entered, autofilled with first name stored in Chrome settings.

Actual outcome

The autocomplete is inactivated.

Howto reproduce

Create a new Polymer project, then put the line below in main.html, together with import in main.dart <paper-input autocomplete="given-name">First name</paper-input>

Observations

Adding two input lines as below to main.html, will give valid autocomplete in the <paper-input> below. This indicates some load/runtime dependency.

<input is="iron-input" autocomplete="email">Email</input>
<input is="iron-input" autocomplete="given-name">First name</input>
<paper-input autocomplete="given-name">First name</paper-input>

Cut from pub.yaml

environment:
  sdk: '>=1.9.0 <2.0.0'

dependencies:
  browser: ^0.10.0
  polymer_elements: ^1.0.0-rc.8
  polymer: ^1.0.0-rc.15
  web_components: ^0.12.0

transformers:
- polymer:
    entry_points: web/index.html
- $dart2js:
    minify: true
    commandLineOptions:
    - --trust-type-annotations
    - --trust-primitives

------------------------------ Workaround ------------------------- Put these two <input> lines below, somewhere in the project. I have chosen index.html, together with an iron-input import in index.dart. Then project wide set all <paper-input autocomplete="on"> or the choosen autocomplete e.g. <paper-input autocomplete="given-name"> This seems to make the autocomplete work.

<input is="iron-input" autocomplete="email" hidden/>
<input is="iron-input" autocomplete="given-name" hidden/>
jonboj commented 8 years ago

Reproduced with polymer_elements: ^1.0.0-rc.9

From pubspec.yaml

environment:
  sdk: '>=1.9.0 <2.0.0'

dependencies:
  browser: ^0.10.0
  polymer_elements: ^1.0.0-rc.9
  polymer: ^1.0.0-rc.17
  web_components: '>=0.11.3 <0.13.0'
jonboj commented 7 years ago

The actual behavior of this feature is hard to figure out from the js Polymer documentation. An answer on StackOverflow help this one out. http://stackoverflow.com/questions/37445468/paper-input-autocomplete-fails-to-fill

The paper-input element should be wrap with form tags as below. Verified with dart2js builds on Chrome 53.

<form>
  <paper-input autocomplete="given-name">First name</paper-input>
</form>

The issue is closed.