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

frasator · 2015-06-03T16:58:39Z

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>

robrez · 2015-06-03T19:14:55Z

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

arthurevans · 2015-06-03T22:47:09Z

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

frasator · 2015-06-04T08:11:11Z

Ok, thank you

ghost · 2015-06-11T09:44:07Z

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

DmitryOlkhovoi · 2015-06-11T11:39:41Z

oh why people are still using IE :)?

tuespetre · 2015-06-22T20:56:25Z

@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

ssshake · 2016-03-04T19:54:38Z

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

tuespetre · 2016-03-04T19:56:20Z

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

tuespetre · 2016-03-04T20:03:09Z

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

ssshake · 2016-03-11T19:54:14Z

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

…e with table and select elements in Internet Explorer. See Polymer bugs: Polymer/polymer#1735 and Polymer/polymer#1567

eugef · 2016-05-24T08:52:15Z

@ssshake thanks for sharing the solution for select

tvdinh · 2016-06-05T23:18:23Z

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

emilbillberg · 2017-06-08T06:47:47Z

Is this still an issue in Polymer 2?

sanjeevpande · 2018-04-03T13:54:52Z

Still an issue with Polymer 2. Please fix.

ebatgerel · 2018-10-29T06:20:15Z

Is this issue still not fixed ? Any suggestion ?

stale · 2020-03-13T05:46:24Z

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.

Narendra95-Kumar · 2020-07-20T07:51:22Z

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.

stale · 2021-07-21T00:36:13Z

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.

kevinpschaaf added the p2 label Jun 4, 2015

kevinpschaaf self-assigned this Jun 4, 2015

Kilometers42 mentioned this issue Aug 11, 2015

@template doesn't work with arrays nippur72/PolymerTS#42

Closed

pbochis mentioned this issue Oct 20, 2015

Add validation for candidates coduno/app#121

Merged

tuespetre mentioned this issue Feb 20, 2016

Add a way for developers to specify a 'container' element within a 'dom-repeat' template #3448

Closed

jakemac53 mentioned this issue Mar 7, 2016

Template repeat does not render items when placed inside of table dart-archive/polymer-dart#686

Closed

dam0vm3nt mentioned this issue Mar 15, 2016

IE11 supporting David-Mulder/paper-datatable#75

Open

keskival pushed a commit to keskival/oskari that referenced this issue Apr 15, 2016

Added the workaround libraries to workaround the template repeat issu…

52681ba

…e with table and select elements in Internet Explorer. See Polymer bugs: Polymer/polymer#1735 and Polymer/polymer#1567

mikekidder mentioned this issue Aug 16, 2016

Variable not accessible in IE11 vuejs/vue#3410

Closed

tjsavage added the 1.x label Sep 8, 2016

TimvdLippe added the ie11 label Aug 31, 2017

TimvdLippe added the dom-repeat label Nov 18, 2017

craigday mentioned this issue Dec 14, 2017

Probably won't work in IE plusTTeam/pt-select#1

Open

Link2Twenty mentioned this issue Jan 12, 2018

Version selector is broken in IE11 webcomponents/webcomponents.org#1093

Closed

web-padawan mentioned this issue Apr 16, 2018

Fix table element parsing in ie11 webcomponents/template#39

Merged

snuggs mentioned this issue Jan 1, 2020

content stripped of elements when rendered devpunks/snuggsi#178

Open

stale bot added the wontfix label Mar 13, 2020

stale bot removed the wontfix label Jul 20, 2020

stale bot added the wontfix label Jul 21, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

frasator commented Jun 3, 2015

robrez commented Jun 3, 2015

arthurevans commented Jun 3, 2015

frasator commented Jun 4, 2015

ghost commented Jun 11, 2015

DmitryOlkhovoi commented Jun 11, 2015

tuespetre commented Jun 22, 2015

ssshake commented Mar 4, 2016

tuespetre commented Mar 4, 2016

tuespetre commented Mar 4, 2016

ssshake commented Mar 11, 2016

eugef commented May 24, 2016

tvdinh commented Jun 5, 2016

emilbillberg commented Jun 8, 2017

sanjeevpande commented Apr 3, 2018

ebatgerel commented Oct 29, 2018

stale bot commented Mar 13, 2020

Narendra95-Kumar commented Jul 20, 2020

stale bot commented Jul 21, 2021

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

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

Comments

frasator commented Jun 3, 2015

robrez commented Jun 3, 2015

arthurevans commented Jun 3, 2015

frasator commented Jun 4, 2015

ghost commented Jun 11, 2015

DmitryOlkhovoi commented Jun 11, 2015

tuespetre commented Jun 22, 2015

ssshake commented Mar 4, 2016

tuespetre commented Mar 4, 2016

tuespetre commented Mar 4, 2016

ssshake commented Mar 11, 2016

eugef commented May 24, 2016

tvdinh commented Jun 5, 2016

emilbillberg commented Jun 8, 2017

sanjeevpande commented Apr 3, 2018

ebatgerel commented Oct 29, 2018

stale bot commented Mar 13, 2020

Narendra95-Kumar commented Jul 20, 2020

stale bot commented Jul 21, 2021