How stop row selecting in primefaces tree after button is clicked - jsf

Question

I have primefaces tree with button and outputtext in treenode. Ajax row select event calls rendering of button. The button has primefaces tired menu which has to appear when button is clicked. The problem is that the button click calls the row select event and the button is rerendered and the menu dissapeared.
<p:tree id="tree1" value="#{treeDNDView.root1}" var="node" selectionMode="single"
selection="#{treeDNDView.selectedNode1}">
<p:ajax event="select" update=" mainform:tree1"/>
<p:treeNode>
<h:panelGrid columns="3" columnClasses="width-5pct,verticalLine,width-95pct">
<p:outputPanel>
<p:commandButton id="dynaButton" value="Show" rendered="#{treeDNDView.selectedNode1.data eq node}" type="button"/>
<p:tieredMenu id="treeNodePanel" overlay="true" trigger="dynaButton" my="left top" at="left bottom">
<p:menuitem value="Save" action="#{menuView.save}"/>
</p:tieredMenu>
</p:outputPanel>
<p:spacer width="5px"/>
<p:outputPanel>
<h:outputText value="#{node}" escape="false"/>
</p:outputPanel>
</h:panelGrid>
</p:treeNode>
</p:tree>
How to separate button click and row select events in this case? How rewrite code to make functionaliry succesfull working?

Answer 1

The problem will be solved by adding the .stopPropagation() to on click event.
<p:outputPanel>
<div onclick="(function(e) { e.preventDefault(); e.stopPropagation(); })(event)">
<p:commandButton id="dynaButton" value="Show" rendered="#{treeDNDView.selectedNode1.data eq node}" type="button"/>
<p:tieredMenu id="treeNodePanel" overlay="true" trigger="dynaButton" my="left top" at="left bottom">
<p:menuitem value="Save" action="#{menuView.save}"/>
</p:tieredMenu>
</div>
</p:outputPanel>