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

Created on 3 Jun 2015 · 17Comments · Source: Polymer/polymer

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>

1.x dom-repeat ie11 p2

Source

frasator

👍3

Most helpful comment

Is this still an issue in Polymer 2?

emilbillberg on 8 Jun 2017

👍4

All 17 comments

I don't know if this will help, but it's worth a shot.

https://github.com/PolymerLabs/polymer-patterns/blob/master/snippets/control-flow/using-template-repeat-with-a-tr-or-an-option.html

robrez on 3 Jun 2015

The problem here is that IE's parser doesn't think <template> belongs in a <select>, so it helpfully removes it for you. <select> and <table> are among the "parser-challenged elements" referred to here:

https://www.polymer-project.org/1.0/docs/#binding-features

@robrez is correct that we had a workaround for this issue in 0.5. We don't have it yet for 1.0. One option is to use a custom element instead of the <select>.

arthurevans on 4 Jun 2015

Ok, thank you

frasator on 4 Jun 2015

is there a date when this issue will be fixed?
we are currently unable to migrate our polymer 0.5 app because it contains many tables and select elements with templates and it needs to work in IE/Edge

ghost on 11 Jun 2015

oh why people are still using IE :)?

DmitryOlkhovoi on 11 Jun 2015

@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 22 Jun 2015

👍1

it's been quite some time was this ever fixed?

ssshake on 4 Mar 2016

@ssshake don't think so, I proposed a new feature in #3448 to address it

tuespetre on 4 Mar 2016

@ssshake no word, it got labelled 'enhancement/needs discussion' by a Polymer team member. Will have to wait and see. Re-rendering on item changes is definitely a pain point.

tuespetre on 4 Mar 2016

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 11 Mar 2016

👍3

@ssshake thanks for sharing the solution for select

eugef on 24 May 2016

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

tvdinh on 6 Jun 2016

👍2

Is this still an issue in Polymer 2?

emilbillberg on 8 Jun 2017

👍4

Still an issue with Polymer 2. Please fix.

sanjeevpande on 3 Apr 2018

Is this issue still not fixed ? Any suggestion ?

ebatgerel on 29 Oct 2018

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.