Timing issues with data lists

[PK1A]

Consider this markup in a template:

<datalist id="months">
    {foreach month in ctrl.monthsList}
    <option value="{month}"></option>
    {/foreach}
</datalist>
<input id="month" type="text" placeholder="Month" size="9" list="months"/>

When you try to run this code you will notice timing issues (I suppose so) where you need to click 2 times before a list gets opened. Additionally the list isn't picked up on the initial render (you don't see that the given input is a list).

Live reproduce scenario: http://plnkr.co/edit/eAicR0xXiDEdzgiwCRRH?p=preview
Tested with Chrome and FFox - both show the same bug

[PK1A]

It is kind of worse than the initial display issue - after a given list item is selected we can't select another item.

[b-laporte]

Apparently the problem is linked to the foreach statement. Btw. when the months collection is global (so not bound) everything works fine: the following example works well in the playground - but if we pass months as template argument the problem is reproduced..

var months=["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];

{template hello(name)}
    <datalist id="months">
       {foreach month in months}
          <option value="{month}"></option>
       {/foreach}
    </datalist>
    <input id="month" type="text" placeholder="Month" size="9" list="months"/>
{/template}

// display the template in the #output div
hello("World").render("output");

[b-laporte]

After a 2nd look the previous example doesn't seem to work on a Mac either... But if I re-set the "list" attribute on the input element once in the DOM, everything works fine again. So it seems indeed that the initial rendering done in a document fragment - and then appended in the DOM - doesn't work well for the "list" attribute (and I guess for other HTML5 attributes referencing element ids..?)