onclick client event handler in <p:commandButton> causes resubmit of page - jsf

Question

I have strange problem with following code:-
<p:dataTable id="dataTbl_mnuItmList_id" rows="5"
paginator="true" paginatorPosition="top"
value="#{addMenuItemMB.menuItemList}" var="menuItem"
style="width:100%; height:100%">
<p:column headerText="Item Name" sortBy="itemName">
<h:outputText value="#{menuItem.itemName}" />
</p:column>
<p:column headerText="Created Date" sortBy="createdDate">
<h:outputText value="#{menuItem.createdDate}">
</h:outputText>
</p:column>
<p:column headerText="Modified Date" sortBy="modifiedDate">
<h:outputText value="#{menuItem.modifiedDate}" />
</p:column>
<p:column>
<p:commandButton id="cmdBtn_edit"
onclick="widVar_menuItem.unselectAllRows()"
update=":frm_addMnuItm_dlg:outPutPnl_addMnuItmDlg_id"
oncomplete="PF('dlg_addMnuItem_widVar').show()"
icon="ui-icon-pencil" title="Edit" value="Edit">
<f:setPropertyActionListener value="#{menuItem}"
target="#{addMenuItemMB.menuItemToEdit}" />
</p:commandButton>
</p:column>
</p:dataTable>
Following is the dataTable having widgetVar="widVar_menuItem"
<p:dataTable id="dataTbl_menuItem_id" rows="5"
paginator="true" paginatorPosition="top"
widgetVar="widVar_menuItem" editable="true" editMode="cell"
value="#{addMenuItemMB.mnuItmSpecDtlListModel}"
var="mnuItmSpecDtl" rowKey="#{mnuItmSpecDtl.id}"
selection="#{addMenuItemMB.selectedLabels}">
<f:facet name="header">
<p:outputLabel value="Specification Label" />
</f:facet>
<p:column selectionMode="multiple"
style="width:2%; display:none;" />
<p:ajax event="toggleSelect"
listener="#{addMenuItemMB.onToggleSelect}" />
<p:ajax event="cellEdit"
listener="#{addMenuItemMB.onCellEdit}" />
<p:column headerText="Label" style="width:31%">
<h:outputText value="#{mnuItmSpecDtl.labelName}" />
</p:column>
<p:column headerText="Price" style="width:25%">
<p:cellEditor>
<f:facet name="output">
<h:outputText value="#{mnuItmSpecDtl.price}" />
</f:facet>
<f:facet name="input">
<p:inputText value="#{mnuItmSpecDtl.price}"
style="width:50px" />
</f:facet>
</p:cellEditor>
</p:column>
</p:dataTable>
Above code Having command button in datatable column which has the property f:setPropertyActionListener it is working fine. But when I added onclick client event handler the page get submitted and when I remove onclick attribute from command button it is working fine as expected. So my question is what is wrong with above code, or What I realized (it may be wrong) client side event handler are not property working with f:setPropertyActionListener attribute.
Please suggest me proper solution.
Thanks.