p: selectOneMenu und unescaped SelectItem label

Question

Wenn Sie SelectOneMenu von Primefaces (6.1.1) verwenden und einige SelectItems mit HTML-formatierten Beschriftungen hinzufügen, zeigt das ausgewählte Element der Komponente den maskierten HTML-Code an, obwohl die Eigenschaft 'SelectItem.escape' ist auf false gesetzt (und zusätzlich ist das 'itemLabelEscaped'-Attribut ebenfalls falsch). Das Dropdown-Menü mit den auswählbaren Elementen wird korrekt gerendert.

Backing Bean Beispiel:

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> 

Ist das ein Bug oder mache ich etwas falsch? Danke für die Hilfe.

Answer 1

Dies ist kein Fehler.

Sie sind wahrscheinlich SelectItem Label mit ausgewähltem Label (siehe Bild unten)

Rendered HTML ungefähr so ​​aussieht verwirrend:

<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 gemacht wird für das ausgewählte Label. (Siehe SelectOneMenuRenderer # encodeLabel)
Also selbst wenn Sie SelectItem.escape Eigenschaft auf false gesetzt oder fügen Sie itemLabelEscaped="false" Attribut f:selectItems, ausgewählte Label wird immer noch maskiert werden.

Um ausgewählte Label zu entgehen, auf die folgenden Codes beziehen sich unten:

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> 

Dies wird das ausgewählte Label in Fenster ändern Laden und wählen Sie OneMenu onfocus und onblur Ereignisse.

Warum habe ich onfocus und onblur anstelle von onchange verwendet?

Wenn Sie onchange verwenden, wird das ausgewählte Label auf den Escape-Wert zurückgesetzt, wenn das selectOneMenu erweitert wird, wenn Sie ein Element nicht geändert/ausgewählt haben.

Fühlen Sie sich frei, damit zu spielen, was zu Ihrer Anforderung passt.

Grüße,