polymer: dom-repeat using select and option tags not working on IE11

This works on chrome, safari 8 and firefox, but no in ie11

To test it use this simple html file

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Test</title>
    <script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
    <link rel="import" href="bower_components/polymer/polymer.html">
    <style>
        html, body {
            width: 100%;
            height: 100%;
            margin: 0;
        }
    </style>
</head>

<body>

<template is="dom-bind" id="app">

    <select>
        <template is="dom-repeat" items="{{options}}" as="o">
            <option value="{{o}}">{{o}}</option>
        </template>
    </select>

</template>


<script>
    (function (document) {
        'use strict';

        var app = document.querySelector('#app');
        app.options = ['one', 'two'];

    })(document);
</script>

</body>
</html>

About this issue

Original URL
State: open
Created 9 years ago
Reactions: 3
Comments: 18

Commits related to this issue

Added the workaround libraries to workaround the template repeat issue with table and select elements in Internet Explorer. See Polymer bugs: https://github.com/Polymer/polymer/issues/1735 and https:/... — committed to keskival/oskari by deleted user 8 years ago

Most upvoted comments

Is this still an issue in Polymer 2?

emilbillberg on Jun 8, 2017

hey there, we’ve authored a polymer component that works around this select in IE issue pretty well (at least we think so). We’d really love some feedback. https://github.com/vehikl/polymer-select-with-options

ssshake on Mar 11, 2016

This could be another way: https://github.com/Juicy/juicy-select

tvdinh on Jun 5, 2016

@DominikMayrhofer

Selects are easy enough to work around:

var options = [ ... ];
var select = this.$.yourSelectElement;

options.forEach(function (item) {
    var option = document.createElement('option');
    option.textContent = item.Text;
    option.value = item.Value;
    select.appendChild(option);
});

Tables are virtually the same, but possibly more arduous

tuespetre on Jun 22, 2015