DataTable: Nested Table in RowExpansion with Splitbutton issue

Describe the bug

To reproduce, add a main datatable and in its rowexpansion tag, add another datatable with selectionMode=‘single’.

<h:form>
    <p:dataTable var="item" 
                 value="#{bean.items}">
        <p:column>
            <p:rowToggler/>
        </p:column>
        <p:column headerText="Item Name">
            <h:outputText value="#{item.name}"/>
        </p:column>
        <p:rowExpansion>
            <p:dataTable var="subitem" 
                         value="#{item.subitems}"
                         selectionMode="single"
                         selection="#{bean.selectedSubitem}"
                         rowKey="#{subitem.id}">
                <p:column headerText="Subitem Name">
                    <h:outputText value="#{subitem.name}" />
                </p:column>
                <p:column>
                    <p:splitButton value="Save" action="#{bean.save}">
                        <p:menuitem value="Update" action="#{bean.update}"/>
                        <p:menuitem value="Delete" action="#{bean.delete}"/>
                    </p:splitButton>
                </p:column>
            </p:dataTable>
        </p:rowExpansion>
    </p:dataTable>
</h:form>

the testing methods in the bean are just

    public void save() {
        System.out.println("Saved subitem");
    }

    public void update() {
       System.out.println("Updated subitem");
    }

    public void delete() {
        System.out.println("Deleted subitem");
    }

The first issue has to do with the selection of the subitem row when clicking or entering slplitbutton. If I click on the center of the dropdown button of the splitbutton, the subitem row gets correctly selected. If I click the default button, no selection is made. Additionally, if I click the bottom-right corner (the space outside the icon) of the dropdown button, no row selection takes place either.

The second issue has to do with bean methods not being executed when more than 2 items are loaded. If only a single item and its subitems are loaded, splitbutton menuitem link buttons work fine. Bean methods are properly called when clicking menuitem links buttons.

But as soon as I load 2 or more items and their subitems, everything looks visually correct, but the commands in splitbutton menuitem link buttons no longer reach bean.

I’ve added this workaround to make sure the subitem row correctly selected when cliking a few parts of the splitbutton:

            jQuery( document).delegate( ".ui-splitbutton .ui-button", "click", 
                function(e){
                    var parentTd = $(this).closest("td");
                    //send click event to parent td element
                    $(parentTd).click();
                }
            );

I also added this workaround to fire off the bean methods based on the split button menuitem text (which is the unique key in my table) by mapping a js function to my bean method: <p:remoteCommand name="splitButtonMenuitemClicked" actionListener="#{bean.save}" style="display: none;" />

and here’s the code that always catches the click event on the splititem menuitem link buttons.:

            jQuery( document).delegate( ".ui-splitbuttonmenu .ui-menuitem-link", "click", 
                function(e){
                    var menuitemText = $(this).find("span.ui-menuitem-text");
                    var wishlistName = $(menuitemText).text();
                    splitButtonMenuitemClicked([{ name: "wishlistName", value: wishlistName }])
                    //console.info("'"+wishlistName+"' Was Clicked");
                }
            );

Reproducer

No response

Expected behavior

1. datatable row should select when clicking any part of splitbutton
2. splitbutton menuitem link buttons should always fire off command from nested datatabkes inside another datatable.

PrimeFaces edition

Community

PrimeFaces version

11.0

Theme

None

JSF implementation

Mojarra

JSF version

2.3

Browser(s)

Firefox

[eframsergio]

Thanks for everything!

[eframsergio]

Awesome, thank you!