search

PolymerElements / iron-autogrow-textarea

Textarea that grows in height as more lines of input are entered
https://webcomponents.org/element/PolymerElements/iron-autogrow-textarea
19 stars 48 forks source link

value / bind-value not working in 2.0-preview on Firefox / Edge #100

Closed feuerste closed 7 years ago

feuerste commented 7 years ago

Description

When binding value or bind-value to iron-autogrow-textarea, the bound data is never updated on Firefox and Edge. This leads to value of paper-textarea not notifying in 2.0-preview on Firefox and Edge either.

Expected outcome

The data bound via value or bind-value should be updated, as in Chrome.

Actual outcome

The data bound via value or bind-value is never updated on Firefox and Edge.

Live Demo

Polygit's Polymer 2 doesn't seem to work for Firefox or Edge, so I include the code to reproduce it here:

index.html:

<!doctype html>
<html lang="en">
  <head>
    <script src="/bower_components/webcomponentsjs/webcomponents-loader.js"></script>
    <link rel="import" href="/test-app.html">
  </head>
  <body>
    <test-app></test-app>
  </body>
</html>

test-app.html:

<link rel="import" href="/bower_components/polymer/polymer-element.html">
<link rel="import" href="/bower_components/iron-autogrow-textarea/iron-autogrow-textarea.html">
<dom-module id="test-app">
  <template>
    <style>
      :host {
        display: block;
      }
    </style>
    <iron-autogrow-textarea value="{{prop1}}"></iron-autogrow-textarea>
    <h2>Hello [[prop1]]</h2>
  </template>
  <script>
    class MyApplication extends Polymer.Element {
      static get is() { return 'test-app'; }
      static get properties() {
        return {
          prop1: {
            type: String,
            value: 'test-app'
          }
        };
      }
    }
    window.customElements.define(MyApplication.is, MyApplication);
  </script>
</dom-module>

bower.json:

{
  "name": "test",
  "main": "index.html",
  "dependencies": {
    "iron-autogrow-textarea": "PolymerElements/iron-autogrow-textarea#2.0-preview",   
    "polymer": "Polymer/polymer#^2.0.0-rc.3"
  }
}

Steps to reproduce

  1. Copy the above code for index.html, test-app.html, and bower.json into files and copy them into a new folder.
  2. Run bower install in this folder.
  3. Run polymer serve in this folder.
  4. Open http://localhost:8081/ in the corresponding browser.
  5. Type something into the text input field.
  6. In Chrome, the heading Hello ... reflects the changes, in Firefox and Edge it does not.

I also tried these steps after applying PR #89 2.0 preview, but it doesn't change anything.

Browsers Affected