[select] Setting value to "0" (number) does not work

[tomalec]

Description

Live Demo

https://jsbin.com/cemagub/edit?html,output

Steps to Reproduce

1. Create vaadin-dropdown-menu with numeric values,
2. Pick the first (0-indexed) element or try to preset it with value="0"

<dom-bind id="db">
  <template>
    <vaadin-dropdown-menu label="Label" placeholder="Placeholder" value="{{model.selectedItem}}">
    <!-- same goes for 
      <vaadin-dropdown-menu label="Label" placeholder="Placeholder" value="0">
    -->
      <template>
        <vaadin-list-box>
          <template is="dom-repeat" items="{{model.items}}">
            <vaadin-item value="{{index}}">{{item}}</vaadin-item>
          </template>
          <hr>
          <vaadin-item disabled>Option four</vaadin-item>
        </vaadin-list-box>
      </template>
    </vaadin-dropdown-menu>
  </template>
</dom-bind>
<script>
  db.set('model', {items: ["zero", "one", "two"], selectedItem: 0});
</script>

Expected Results

The first element should be selected

Actual Results

Dropdown behaves as there is nothing selected

Browsers Affected

• Chrome
• Firefox
• Edge
• [?] Safari 9
• [?] Safari 8
• IE 11

Versions

• vaadin-dropdown-menu: https://github.com/vaadin/vaadin-dropdown-menu/tree/62eca8957aea266514b180564d87e7285874bf84 (master)
• webcomponents: https://github.com/webcomponents/webcomponentsjs/tree/a957286fa3cb157695cb82a1cdd9c822290f73d6(v1)

[web-padawan]

The problem gets fixed if you use string value. See the glitch with the working example:

https://glitch.com/edit/#!/caramel-rise?path=index.html:14:74

Basically, you should use value$ attribute bindings for both items and dropdown-menu itself to make sure the values are passed as strings. We probably have to document it better, or warn about numeric value usage to not confuse developers.

[web-padawan]

This is now fixed by #4064 and released in Vaadin 23.1.2 and later. Closing.