Tree: Submitting two selection tree´s inside a form leads to losing selection on the second tree and wrong selection on the first tree

Describe the defect I have two selection tree´s inside a ui:repeat in a form. When i submit the form and the tree´s get processed, the selection of the second tree moves to the selection of the first tree and the selection of the second tree is set to null. The id-attribute of the tree is the same as it is inside a ui:repeat, but the client-id´s are different.

Environment: PF Version: any PF Theme: any JSF + version: any Affected browsers: any

To Reproduce Steps to reproduce the behavior:

1. Just create multiple selection tree´s inside an ui:repeat and give an id to the tree inside the ui:repeat. The ui:repeat in turn should be inside a form, as I want to submit the form and process the form with the selection of the tree´s
2. Select an item for the first tree
3. Select an item for the second tree
4. See error

Expected behavior The expected behaviour should be, that every tree has set the right selected node. But as mentioned, the first tree get´s the selection of the second tree und the selected node of the second tree gets null.

Example XHTML

<h:form id="testform">
            <ui:repeat id="trees" value="#{treeSelectionView.trees}" var="tree">
                <p:tree id="MY_TREE" value="#{tree.root}" var="doc"
                        selectionMode="single"
                        selection="#{tree.selectedNode}">
                    <p:treeNode expandedIcon="pi pi-folder-open" collapsedIcon="pi pi-folder">
                        <h:outputText value="#{doc.name}"/>
                    </p:treeNode>
                    <p:treeNode type="app" icon="pi pi-save">
                        <h:outputText value="#{doc.name}"/>
                    </p:treeNode>
                    <p:treeNode type="document" icon="pi pi-file">
                        <h:outputText value="#{doc.name}"/>
                    </p:treeNode>
                    <p:treeNode type="excel" icon="pi pi-file-excel">
                        <h:outputText value="#{doc.name}"/>
                    </p:treeNode>
                    <p:treeNode type="travel" icon="pi pi-file-pdf">
                        <h:outputText value="#{doc.name}"/>
                    </p:treeNode>
                    <p:treeNode type="picture" icon="pi pi-image">
                        <h:outputText value="#{doc.name}"/>
                    </p:treeNode>
                    <p:treeNode type="video" icon="pi pi-video">
                        <h:outputText value="#{doc.name}"/>
                    </p:treeNode>
                </p:tree>
            </ui:repeat>
        </h:form>


        <p:commandButton id="submitTreesButton" widgetVar="submitTreesButtonVar"
                         value="Submit"
                         process="testform"
                         actionListener="#{treeSelectionView.saveTrees()}"
                         partialSubmit="true"
        />

Example Bean

@Named
@ViewScoped
public class TreeSelectionView implements Serializable {

    @Inject
    private TreeSelectionService treeSelectionService;

    private List<DocumentTreeSelectionModel> trees = new ArrayList<>();

    @PostConstruct
    public void init() {
        DocumentTreeSelectionModel tree1 = new DocumentTreeSelectionModel(treeSelectionService.createDocuments());
        DocumentTreeSelectionModel tree2 = new DocumentTreeSelectionModel(treeSelectionService.createCheckboxDocuments());
        trees.add(tree1);
        trees.add(tree2);
    }

    public List<DocumentTreeSelectionModel> getTrees() {
        return trees;
    }

    public void saveTrees() {
        TreeNode selectedTreeNode1 = trees.get(0).getSelectedNode();
        TreeNode selectedTreeNode2 = trees.get(1).getSelectedNode();
        // NOW HERE IS WRONG DATA INSIDE THE SELECTED TREE NODES FOR EACH TREE
    }
}

DocumentTreeSelectionModel which is used in my example bean

public class DocumentTreeSelectionModel {

    private TreeNode selectedNode;
    private TreeNode root;

    public DocumentTreeSelectionModel(TreeNode root) {
        this.root = root;
    }

    public TreeNode getSelectedNode() {
        return selectedNode;
    }

    public void setSelectedNode(TreeNode selectedNode) {
        this.selectedNode = selectedNode;
    }

    public TreeNode getRoot() {
        return root;
    }
}

Document.java and DocumentService.java are used from https://www.primefaces.org/showcase/ui/data/tree/selection.xhtml?jfwid=c7d3f

[lagar84]

Is this maybe related to #3812 ?

[FlipWarthog]

Okay, after realizing I had the wrong ViewScoped on my bean and correcting that, I was able to reference #3812 and can confirm that the following does work:

    <h:form id="testform">
        <c:forEach id="trees" items="#{treeSelectionView.trees}" var="tree" varStatus="loop">
            <p:tree id="MY_TREE-#{loop.index}" value="#{tree.root}" var="doc" selectionMode="single" selection="#{tree.selectedNode}">
                <p:treeNode expandedIcon="pi pi-folder-open" collapsedIcon="pi pi-folder">
                    <h:outputText value="#{doc.name}" />
                </p:treeNode>
                <p:treeNode type="app" icon="pi pi-save">
                    <h:outputText value="#{doc.name}" />
                </p:treeNode>
                <p:treeNode type="document" icon="pi pi-file">
                    <h:outputText value="#{doc.name}" />
                </p:treeNode>
                <p:treeNode type="excel" icon="pi pi-file-excel">
                    <h:outputText value="#{doc.name}" />
                </p:treeNode>
                <p:treeNode type="travel" icon="pi pi-file-pdf">
                    <h:outputText value="#{doc.name}" />
                </p:treeNode>
                <p:treeNode type="picture" icon="pi pi-image">
                    <h:outputText value="#{doc.name}" />
                </p:treeNode>
                <p:treeNode type="video" icon="pi pi-video">
                    <h:outputText value="#{doc.name}" />
                </p:treeNode>
            </p:tree>
        </c:forEach>
        <p:commandButton id="submitTreesButton" value="Submit" process="@form"
            actionListener="#{treeSelectionView.saveTrees()}" />
    </h:form>

cc @melloware in case there’s more digging to do.