HTML 5 dropdown and JSF 2.2

Question

I´m trying to send a <select> value to a JSF managed bean but I don´t know how to make it. My code is:

<select id="cb-frentes" required="required" jsf:value="#{checkstyleBean.frente}">
    <option value=""/>
    <ui:repeat var="frente" value="#{appBean.frentes}">
        <option value="#{frente}" label="#{frente}"/>
    </ui:repeat>
</select>

It does not work. The value of frente attribute is always null, when I invoke my action method.

How can I make this bind?

Answer 1

The <option> element is by default not recognized as a passthrough element. It's not listed in table 8.4 of Java EE tutorial chapter 8.9 'HTML5-Friendly Markup'.

You'd need to explicitly tell the underlying JSF component. You can do that using the jsfc attribute, which is surprisingly not mentioned in the Java EE 7 tutorial (perhaps because it's part of Facelets, the view technology, and not of JSF).

<select id="cb-frentes" required="required" size="1" jsf:value="#{checkstyleBean.frente}">
    <option value="#{null}" jsfc="f:selectItem" />
    <ui:repeat value="#{appBean.frentes}" var="frente" jsfc="f:selectItems">
        <option value="#{frente}">#{frente}</option>
    </ui:repeat>
</select>

Note that I fixed the value of the 1st option to be explicitly #{null}, and that I fixed the incorrect way of setting the option label. Further I also added size="1" to the <select>, otherwise it's by default rendered as a listbox instead of a dropdown.