Polymer select bind value on firefox

[DartBot]

This issue was originally filed by [email protected]

---

What steps will reproduce the problem?
<select value="{{orgId}}" on-change="{{orgChange}}">
  <option template repeat="{{organization in dsOrganizations}}" value="{{organization['orgId']}}">{{organization['name']}}</option>
</select>

note: dsOrganizations is dict.

What is the expected output? What do you see instead?
The above code snippet run on chrome, orgChange event can get the correct bind value orgId.
But run on firefox 25, orgChange event can't get the correct bind value orgId, the orgId value is not current selected value, it seems is previous selected value.

What version of the product are you using? On what operating system?

Please provide any additional information below.

[DartBot]

This comment was originally written by [email protected]

---

SDK and polymer ver: 0.8.10

[iposva-google]

Added Area-Polymer, Triaged labels.

[DartBot]

This comment was originally written by [email protected]

---

Upgrade to SDK 1.0.2_r30821 and polymer 0.9.1+1, the issue still exists.

[DartBot]

This comment was originally written by [email protected]

---

Upgrade to SDK 1.0.3.0_r30939 and polymer 0.9.2+1, the issue still exists.

[sigmundch]

I was able to reproduce the problem. There seems to be a timing issue, but I'm not certain yet where this is coming from.

Note, I found two ways to workaround the problem. You can use any of these until we find a proper fix.

* workaround #­1: add a 'scheduleMicrotask' in the change handler

• workaround #­2: listen to the observable change in your custom element by using 'oldIdChanged' instead of listening for the on-change event.

Here is a simplified example illustrating the problem and the workarounds:

  <polymer-element name="x-test">
    <template>
      <select value="{{currentId}}" on-change="{{changeHandler}}">
        <option template repeat="{{id in list}}" value="{{id}}">item {{id}}</option>
      </select>
    </template>
  </polymer-element>
  
  <x-test></x-test>
  <script type="application/dart">
  import 'package:polymer/polymer.dart';
  import 'dart:async';
  
  @­CustomTag('x-test')
  class Foo extends PolymerElement {
    var list = const [ "a1", "a2", "a3", "a4" ];
    @­observable String currentId = 'a2';
  
    Foo.created() : super.created();
  
    void changeHandler(e, d, t) {

      // the problem: prints new-id in chrome, old-id in FF
      print('before microtask: $currentId');

      // workaround #­1: prints new-id in both chrome and FF
      scheduleMicrotask(() { print('after microtask: $currentId'); });
    }

    // workaround #­2: this is called when currentId == newV in both chrome and FF:
    void currentIdChanged(oldV, newV) {
      print('old: $oldV, new: $newV, current: $currentId');
    }
  }
  
  main() { initPolymer(); }
  </script>

[sigmundch]

Ok - turns out that the problem is that the order of the attributes returned in FF and in chrome is different. So, when template_binding is processing registration of bindings it finds 'value' and 'on-change' in that order in Chrome, but in the opposite order in FF.

For this reason, the on-change event is fired before the currentId is updated.

Here is an even simpler example that illustrates the problem:

  <polymer-element name="x-test">
  <template><input value="{{current}}" on-input="{{handler}}"></input></template>
  </polymer-element>
  
  <x-test></x-test>
  <script type="application/dart">
  import 'package:polymer/polymer.dart';
  import 'dart:async';
  
  @­CustomTag('x-test')
  class Foo extends PolymerElement {
    @­observable String current = 'abc';
  
    Foo.created() : super.created();
  
    void currentChanged(oldV, newV) {
      print('0: $current');
    }
  
    void handler(e, d, t) {
      print('1: $current');
      scheduleMicrotask(() { print('2: $current'); });
    }
  }
  
  main() { initPolymer(); }
  </script>

If you type 'd' at the end of the input box, you'll see:

0:abcd
1:abcd
2:abcd

in chrome, but you'll see:
1:abc
2:abcd
0:abcd

in FF

This problem exists also in polymer.js, so I created this bug in their repo:
Polymer/polymer#368

We'll wait for them to resolve this, and we'll update our package once they fix it. For now, the workarounds mentioned above should be good enough to avoid this problem.

---

Added this to the 1.1 milestone.
Removed Priority-Unassigned label.
Added Priority-Low label.

[sigmundch]

Added Waiting label.

[sigmundch]

Removed this from the 1.1 milestone.
Added this to the 1.2 milestone.

[sigmundch]

Added Library-Polymer label.

[jmesserly]

Removed Area-Polymer label.
Added area-pkg, Pkg-Polymer labels.

[jmesserly]

Removed Library-Polymer label.

[kasperl]

Removed this from the 1.2 milestone.
Added this to the 1.6 milestone.

[sigmundch]

Removed this from the 1.6 milestone.
Added this to the Later milestone.

[sigmundch]

Added Polymer-P-2 label.

[sigmundch]

Removed this from the Later milestone.

[sigmundch]

Removed Polymer-P-2 label.
Added Polymer-Milestone-Later label.

[sigmundch]

Removed Polymer-Milestone-Later label.
Added PolymerMilestone-Later label.

[DartBot]

This issue has been moved to dart-archive/polymer-dart#93.