Strange behavior in Elm HTML select

Question

I am encountering strange behavior in a small Elm program with an HTML select element.

The options initially include an empty first item with a value of "" and 3 additional items with values "bar", "baz", and "foo".

When the page initially displays, the empty first item is selected, as expected.

If the dropdown is then clicked and "bar" is selected from the list, the dropdown then shows, and selects "baz", not "bar". Note that when an item is selected, the select element is re-rendered without the empty first option.

Here is code that demonstrates this problem.

Why is this occurring? Should I just leave the empty first item in the select options? That will leave an empty "slot" in the dropdown. Can this be avoided?

I initially found this in Chrome, but it also occurs in Firefox, so I suspect I am violating something in the HTML specification.

Answer 1

First off I just wanted to say, thank you for isolating the issue and giving us a small sample project that demonstrates the issue. It took a bit of digging, but I discovered that the html 'selected' attribute, is to set the selected value at page load. So updating it after page load will cause odd behaviors, we are to use 'value' instead. And on the flip side, setting 'value' on page load is ignored! Thanks html! ;) Source here

See revised code here