Html.Attributes.value does not work as <select value="">

[ravicious]

Elm 0.17, elm-lang/html 1.1.0, macOS 10.12.1, Chrome 54.

Problem

If you have a select tag with the required attribute, you can create a placeholder option – all you have to do is to create an option with an empty string¹ as the value attribute. It's called placeholder label option. It forces the user to actually choose an option from the select before submitting the form. See the HTML5 spec and the related SO answer for more details.

When I tried to implement that in Elm, I found out that passing an empty string to Html.Attributes.value doesn't work. If you inspect such element in Safari/Chrome developer tools, you'll see that there's no value attribute defined on the node.²

However, everything works fine if I use Html.Attributes.attribute "value" "". The value appears to be set on the option tag, though it has no value (see footnote 1).

Take a look at the SSCCE. The last select implements the placeholder label option correctly.

Only the last select has the value attribute set on the first option. If you're on Chrome and try to click the submit button, Chrome is going to complain about the lack of a chosen option only for the last select.

Solution

One possible solution is to use HTML attribute instead of JS property for Html.Attributes.attribute. However, this seems like a big change and I'm not sure if and how it's going to impact existing codebases.

If it turns out that elm-lang/html omits properties with an empty string as a value, we may consider not omitting them (see the second footnote).

There's always the possibility to keep everything as it is. However, it leaves the devs who want to use the placeholder label option with no choice but to implement it with Html.Attributes.attribute and leave a comment on why it's implemented this way and not with Html.Attributes.value (or just leave a link to this issue).

I feel that resolving this issue requires someone with a broad knowledge of elm-lang/html, the Elm's rendering engine and HTML & JS to make a decision on what's the best way to approach it. This is why I'm leaving a bug report without a WIP solution.

At work, we often use the placeholder label option together with the required attribute in our internal apps – HTML5 provides an easy way to implement basic cross-platform validation of forms. I think I'm not alone in this and I hope this report is going to either help with fixing the issue or help other devs with finding a workaround. 🙃

---

1: This is not 100% true. One can just define the value attribute on the HTML node without any value for it – that's what Elm does with Html.Attributes.attribute "value" "". But I don't know, maybe the browsers treat <option value> and <option value=""> as equal.

2: I think this is because the functions in Html.Attributes use JS node properties by default and either JS omits the property if it's an empty string or the Elm implementation does. I didn't look that far under the hood.

[process-bot]

Thanks for the issue! Make sure it satisfies this checklist. My human colleagues will appreciate it!

Here is what to expect next, and if anyone wants to comment, keep these things in mind.

[witte-de-with]

I ran into this, or something related to this, a while back. I saw some strange rendering happening in select boxes for placeholder <option>s. It seemed like the inclusion of the value attribute was not consistent.

Here is an SSCCE that can be pasted into the elm-lang.org/try: https://gist.githubusercontent.com/i-s-o-g-r-a-m/7efb7beaa769b5d8730cb1eb3363f465/raw/b352b74c72095b2aeee34e28e910eb06bfea109e/select.elm

If you inspect the DOM, you will see this the first time the page is rendered:

<form>
    <select>
        <option>---</option>
        <option value="a">a</option>
    </select>
    <div>
        <button class="update">update</button>
    </div>
</form>

If you hit the 'submit' button, you'll see that the placeholder text (---) is no longer shown in the select box, and the DOM now looks like:

<form>
    <select>
        <option value="">---</option>
        <option value="a">a</option>
    </select>
    <div>
        <button class="update">update</button>
    </div>
</form>

That is, the value="" attribute is now there. This behavior seems confusing.

I'm using Chrome.

Thanks!

[kfrn-nec]

I have a similar experience to @i-s-o-g-r-a-m above.

I'm at first seeing:

<select>
        <option></option>
        <option value="notblank">notblank</option>
</select>

, then after an onChange event has fired:

<select>
        <option value></option>
        <option value="notblank">notblank</option>
</select>

I'll use theHtml.Attributes.attribute "value"workaround mentioned above, but it would be great if the value attribute could be rendered in the DOM even if its content is empty.