SelectOneMenu with editable="true", using Primefaces Select Item Groups erroneously submits the label not value

Question

Using the example from https://stackoverflow.com/tags/selectonemenu/info

    SelectItemGroup group1 = new SelectItemGroup("Group 1");
    group1.setSelectItems(new SelectItem[] {
        new SelectItem("Group 1 Value 1", "Group 1 Label 1"),
        new SelectItem("Group 1 Value 2", "Group 1 Label 2"),
        new SelectItem("Group 1 Value 3", "Group 1 Label 3")
    });
    availableShopOrders.add(group1);

    SelectItemGroup group2 = new SelectItemGroup("Group 2");
    group2.setSelectItems(new SelectItem[] {
        new SelectItem("Group 2 Value 1", "Group 2 Label 1"),
        new SelectItem("Group 2 Value 2", "Group 2 Label 2"),
        new SelectItem("Group 2 Value 3", "Group 2 Label 3")
    });
    availableShopOrders.add(group2);        


   <p:selectOneMenu id="so" value="#{myView.shopOrder}" editable="true">
        <f:selectItem noSelectionOption="true" itemLabel="Select a Shop Order" itemValue="null" />                                                                      
        <f:selectItems value="#{myView.availableShopOrders}" />
   </p:selectOneMenu>

when p:selectOneMenu editable="true"

the value submitted to myView.shopOrder is the label of the SelectItems arrary

when p:selectOneMenu editable="false"

the value submitted to myView.shopOrder is the value of the SelectItems arrary

How do I have the p:selectOneMenu with editable="true" and have it submit the itemValue

I've tried omnifaces.SelectItemsConverter, a custom converter. I've also tried: <f:selectItems value="#{myView.availableShopOrders}" var="aso" itemValue="#{aso.value} "/>

I am using PF 8.0

MyView

package org.primefaces.test;

import java.io.Serializable;
import java.util.ArrayList;
import java.util.List;

import javax.faces.model.SelectItem;
import javax.faces.model.SelectItemGroup;
import javax.faces.view.ViewScoped;
import javax.inject.Named;

@Named
@ViewScoped
public class MyView implements Serializable {
    private static final long serialVersionUID = 1L;

    private String input1;
    private String input2;
    private String input3;
    private List<SelectItem> availableShopOrders;

    private List<MyShopOrder> mySavedShopOrders;
    private List<String> recentlyUsedShopOrders;

    public void init() {
        availableShopOrders = new ArrayList<>();
        SelectItemGroup group1 = new SelectItemGroup("Group 1");
        group1.setSelectItems(new SelectItem[] { new SelectItem("Group 1 Value 1", "Group 1 Label 1"), new SelectItem("Group 1 Value 2", "Group 1 Label 2"),
                new SelectItem("Group 1 Value 3", "Group 1 Label 3") });
        availableShopOrders.add(group1);

        SelectItemGroup group2 = new SelectItemGroup("Group 2");
        group2.setSelectItems(new SelectItem[] { new SelectItem("Group 2 Value 1", "Group 2 Label 1"), new SelectItem("Group 2 Value 2", "Group 2 Label 2"),
                new SelectItem("Group 2 Value 3", "Group 2 Label 3") });
        availableShopOrders.add(group2);
        
        MyShopOrder mySo1 = new MyShopOrder();
        mySo1.setShopOrder("My SO Value 1");
        mySo1.setShortDesciption("Description 1");
        
        MyShopOrder mySo2 = new MyShopOrder();
        mySo2.setShopOrder("My SO Value 2");
        mySo2.setShortDesciption("Description 2");
        
        mySavedShopOrders = new ArrayList<>();
        mySavedShopOrders.add(mySo1);
        mySavedShopOrders.add(mySo2);
        
        recentlyUsedShopOrders = new ArrayList<>();
        recentlyUsedShopOrders.add("Non-Favorite Value 1");
        recentlyUsedShopOrders.add("Non-Favorite Value 2");
        recentlyUsedShopOrders.add("Non-Favorite Value 3");   
    }
    public void submitIt1() {
        System.out.println("input1 submitted is: " + input1);
    }
    public void submitIt2() {
        System.out.println("input2 submitted is: " + input2);
    }
    public void submitIt3() {
        System.out.println("input3 submitted is: " + input3);
    }
 ... setters/getters
}

MyShopOrder.java

package org.primefaces.test;

import java.io.Serializable;

public class MyShopOrder implements Serializable {
    private static final long serialVersionUID = 1L;


    private String shopOrder;
    private String shortDesciption;
    ...setters/getters
}

page.xhtml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://xmlns.jcp.org/jsf/facelets" xmlns:h="http://xmlns.jcp.org/jsf/html" xmlns:f="http://xmlns.jcp.org/jsf/core"
    xmlns:p="http://primefaces.org/ui" xmlns:pe="http://primefaces.org/ui/extensions" xmlns:o="http://omnifaces.org/ui" xmlns:of="http://omnifaces.org/functions">
<h:head>
    <f:facet name="first">
        <meta http-equiv="X-UA-Compatible" content="IE=EDGE" />
    </f:facet>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />

    <title><ui:insert name="title">PF8 Test</ui:insert></title>

</h:head>

<h:body>
    <h:outputStylesheet name="primeicons/primeicons.css" library="primefaces" />
    <h:outputStylesheet library="css" name="screen.css" />

    <f:metadata>
        <f:viewAction action="#{myView.init()}" onPostback="false" />
    </f:metadata>

    <h2>Select Item Groups with editable Select One Menu</h2>
    <h:form id="editableId">
        <p:selectOneMenu id="so3" value="#{myView.input1}" editable="true">
            <f:selectItem noSelectionOption="true" itemLabel="Select a Shop Order" itemValue="null" />
            <f:selectItems value="#{myView.availableShopOrders}" />
        </p:selectOneMenu>
        <br />
        <p:commandButton value="Submit Select Item Group with edit=true" action="#{myView.submitIt1()}" />
    </h:form>

    <hr />
    <br />
    <br />
    <h2>Select Item Groups with non-editable Select One Menu</h2>
    <h:form id="notEditableId">
        <p:selectOneMenu id="so3" value="#{myView.input2}" editable="false">
            <f:selectItem noSelectionOption="true" itemLabel="Select a Shop Order" itemValue="null" />
            <f:selectItems value="#{myView.availableShopOrders}" var="aso" />
        </p:selectOneMenu>
        <br />
        <p:commandButton value="Submit Select Item Group with edit=false" action="#{myView.submitIt2()}" />
    </h:form>


    <hr />
    <br />
    <br />
    <h2>Without Select Item Groups with editable Select One Menu</h2>
    <h:form id="noGroupsEditableId">
        <p:selectOneMenu id="so3" value="#{myView.input3}" editable="true">
            <f:selectItem noSelectionOption="true" itemLabel="Select a Shop Order" itemValue="null" />

            <f:selectItem noSelectionOption="true" itemLabel="---Saved Favorites" itemValue="null" />
            <f:selectItems value="#{myView.mySavedShopOrders}" var="shopOrder"
                itemLabel="#{shopOrder.shopOrder} #{shopOrder.shortDesciption != null ? '('.concat(shopOrder.shortDesciption).concat(')') : '' }" itemValue="#{shopOrder.shopOrder}" />

            <f:selectItem noSelectionOption="true" itemLabel="---Recently Used Non-Favorites" itemValue="null" />
            <f:selectItems value="#{myView.recentlyUsedShopOrders}" var="shopOrder" itemLabel="#{shopOrder}" itemValue="#{shopOrder}" />

        </p:selectOneMenu>
        <br />
        <p:commandButton value="Submit without Select Item Group with edit=true" action="#{myView.submitIt3()}" />
    </h:form>


</h:body>
</html>

Output

[INFO] Started Jetty Server
input1 submitted is: Group 1 Label 3
input2 submitted is: Group 2 Value 1
input3 submitted is: Typed In Value
input3 submitted is: My SO Value 1
input3 submitted is: Non-Favorite Value 1

Answer 1

I have submitted this issue: https://github.com/primefaces/primefaces/issues/6507

I plan on fixing it for PF 9.0.

Integration Test: https://github.com/primefaces-extensions/primefaces-integration-tests/commit/7e4aff0890b7fde321a2abf37b40c588d1aa691c

PR: https://github.com/primefaces/primefaces/pull/6508