h:panelGrid run action after clicking into blank space

Question

When I click somewhere inside my panelGrid, it runs action from my commandButton which is inside as well. Whole accordionPanel is inside h:form ..

jsf:

    <p:accordionPanel value="#{test.getAllTests()}" var="currentTest" activeIndex="false">   
        <p:tab title="#{currentTest.name}">
        <h:panelGrid columns="2" cellpadding="10">
            <p:graphicImage value="resources/img/testIT/#{currentTest.imageSrc}" width="100" height="100" />
            <p:outputLabel>
                <h2>#{currentTest.name}</h2>
                <p>#{currentTest.description}</p>
                <p:commandButton value="Zvolit test" styleClass="testChoseButton" actionListener="#{test.setSelectedTest(currentTest)}" action="testProgress.xhtml" />
                <p:spacer height="5px" width="20px" style="float: right;" />
                <p:button value="Statistika testu" styleClass="testChoseButton" />
            </p:outputLabel>    
        </h:panelGrid>
    </p:tab>
</p:accordionPanel>

test.setSelectedTest(currentTest):

    public void setSelectedTest(Test selectedTest) {
    this.selectedTest = selectedTest;
    System.err.println("Selected test: " + selectedTest.getId() + " - " + selectedTest.getName());

}

I do not know what more you could need guys. Thnx for help.

Answer 1

You're misusing p:outputLabel, it generates a HTML <label> element which is not what you want. I'd think both these will work:

• p:outputPanel
• h:panelGroup

They can both produce a HTML span or a div based on the layout attribute.

I'd take <h:panelGroup> which is meant for exactly this kind of grouping.