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>

Jun 03 '15 16:06 frasator

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

Jun 03 '15 19:06 robrez

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>.

Jun 03 '15 22:06 arthurevans

Ok, thank you

Jun 04 '15 08:06 frasator

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

Jun 11 '15 09:06 ghost

oh why people are still using IE :)?

Jun 11 '15 11:06 DmitryOlkhovoi

@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

Jun 22 '15 20:06 tuespetre

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

Mar 04 '16 19:03 ssshake

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

Mar 04 '16 19:03 tuespetre

@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.

Mar 04 '16 20:03 tuespetre

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

Mar 11 '16 19:03 ssshake

@ssshake thanks for sharing the solution for select

May 24 '16 08:05 eugef

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

Jun 05 '16 23:06 tvdinh

Is this still an issue in Polymer 2?

Jun 08 '17 06:06 emilbillberg

Still an issue with Polymer 2. Please fix.

Apr 03 '18 13:04 sanjeevpande

Is this issue still not fixed ? Any suggestion ?

Oct 29 '18 06:10 ebatgerel

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.

Mar 13 '20 05:03 stale[bot]

oh why people are still using IE :)?

That's a very intelligent question. I also feel the same way, in fact why IE is still there.

Jul 20 '20 07:07 Narendra95-Kumar

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.

Jul 21 '21 00:07 stale[bot]

polymer polymer copied to clipboard

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

polymer
polymer copied to clipboard