p:selectOneMenu and unescaped SelectItem label

Question

When using the SelectOneMenu from Primefaces (6.1.1) and adding some SelectItems having HTML formatted labels, the selected item of the Component displays the escaped HTML, even though the 'SelectItem.escape' property is set to false (and, in addition, the 'itemLabelEscaped'-Attribute is false as well). The dropdown holding the selectable items is rendered correctly.

Backing bean sample:

public List<SelectItem> formattedSelectItems() {
    List<SelectItem> items = new ArrayList<>();
    for (int i = 100; i < 103; i++) {
        items.add(new SelectItem(i, "<u>" + i + "</u>", "", false, false));
    }
    return items;
}

JSF:

<p:selectOneMenu>
    <f:selectItems value="#{selectOneTestController.formattedSelectItems()}" itemLabelEscaped="false"/>
</p:selectOneMenu>

Is this a bug or am I doing something wrong? Thanks for help.

In modern jsf versions, it is not needed anymore to create 'SelectItem' objects... — Kukeltje, Jun 02 '17 at 08:41

Tonkichi · Accepted Answer · 2017-06-02T07:42:33.760

This is not a bug.

You are probably confusing SelectItem's Label with Selected Label (see image below)

Rendered HTML looks something like this:

<div class="ui-selectonemenu ui-widget ui-state-default ui-corner-all"
    id="form:oneMenu" style="min-width: 47px;">
    <div class="ui-helper-hidden-accessible">
        <input name="form:oneMenu_focus" class="mb-user-select-none"
            id="form:oneMenu_focus" role="combobox" aria-disabled="false"
            aria-expanded="false" aria-haspopup="true"
            aria-describedby="form:oneMenu_2"
            aria-activedescendant="form:oneMenu_2"
            aria-owns="form:oneMenu_items" aria-autocomplete="list"
            onfocus="changeSelectedLabel()" onblur="changeSelectedLabel()" type="text"
            autocomplete="off">
    </div>
    <div class="ui-helper-hidden-accessible">
        <select name="form:oneMenu_input" tabindex="-1"
            id="form:oneMenu_input" data-p-hl="onemenu">
                        <option value="100">100</option>
            <option value="101">101</option>
            <option value="102">102</option></select>
    </div>
    <label class="ui-selectonemenu-label ui-inputfield ui-corner-all" id="form:oneMenu_label"><u>102</u></label>
    <div
        class="ui-selectonemenu-trigger ui-state-default ui-corner-right">
        <span class="ui-icon ui-icon-triangle-1-s ui-c"></span>
    </div>
</div>

A label is rendered for the Selected Label. (see SelectOneMenuRenderer#encodeLabel)
So even if you set SelectItem.escape property to false or add itemLabelEscaped="false" attribute of f:selectItems, Selected Label will still be escaped.

In order to escape Selected Label, refer to the following codes bellow:

Script

<script type="text/javascript">
    function changeSelectedLabel() {
        console.log('change!!');
        var label = $("label[id='form:oneMenu_label']");
        var text = label.text();
        label.text("");
        label.append(text);
    }

    $(window).bind("load", function() {
        changeSelectedLabel();
    });
</script>

selectOneMenu

<p:selectOneMenu id="oneMenu" onfocus="changeSelectedLabel()" onblur="changeSelectedLabel()">
    <f:selectItems value="#{selectOneTestController.formattedSelectItems()}" itemLabelEscaped="false"/>
</p:selectOneMenu>

This will change the Selected Label in window load and selectOneMenu's onfocus and onblur events.

Why I used onfocus and onblur instead of onchange?

Using onchange will return the Selected Label to it's escaped value when the selectOneMenu is expanded if you didn't changed/selected an item.

Feel free to play with this to what fits your requirement.

Regards,

Thanks for your answer. I think, technically seen you're absolutly right, but from a user's view, there's one component and one wouldn't expect, that the selected value ('Selected Label') has to be manipulated by a client script to look the same as the selectable values. But it's at least a good work around, hence the 'Accept'-Check. Thanks again. — perfetzki, Jun 06 '17 at 08:30
I mentioned that this is not a bug but forgot to add that this might be an improvement. I was about to file an issue about this and then stumble with this [issue](https://github.com/primefaces/primefaces/issues/2402) filed 5 days ago with exactly the same problem as yours. It was labeled as defect and set as a milestone for Primefaces 6.2. — Tonkichi, Jun 07 '17 at 00:35

p:selectOneMenu and unescaped SelectItem label

1 Answers1

Linked