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

Can you create a small reproducible example using the PrimeFaces Test project so I can debug it? See: github.com/primefaces/primefaces-test — Melloware
@Melloware Thanks, I downloaded the test project and added code MyView.java and page.xhtml and it behaved the same. The submitted value is the Label when the selectonemenu is editable. — jeff
Can you post a link to that somewhere so I can grab it and run it? — Melloware
Code is on company internal server. I don't have an external repository. All I did was add MyView.java to org.primefaces.test and page.xhtml to webapp folder. — jeff
I have confirmed your issue. What I can't figure out if this is as designed. Because the item is editable that means it HAS to submit the label so if you enter a value that is not in the list like "Foo" there is no value to submit. The PF showcase uses cities where the values are the same as the label which is why it doesn't show the issue. This is a regression of this issue: github.com/primefaces/primefaces/issues/2862 — Melloware

Melloware Melloware · Accepted Answer · 2020-11-13T13:39:25

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

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

1 Answers