Why do you see a duplicate af:commandToolbarButton after partial page refresh?

This is a very widely observed issue if you have partialTriggers set for child components of <af:toolbar>.
 <af:toolbar>  
 <af:commandToolbarButton ... partialTriggers="someComp"/>  
 </af:toolbar>  

What goes wrong here?

Well, please see the tag documentation for <af:toolbar> . I'm copying the relevant content for your reference.

Updating through PartialTriggers

Note that if a toolbar child component is going to be updated through partial page rendering, you need to update the toolbar as well. You do this by adding the child components id to the toolbar's partialTriggers attribute. This way the toolbar can appropriately manage its children in respect to sizing and placement in overflow. Also note that many input components also update themselves through partial page rendering. If you include an input component (or quickQuery) on a toolbar, you should include that child's id in the toolbar's partialTriggers attribute so that the toolbar also updates when the input component is replaced. Because this partialTrigger will cause overflow to close during the toolbar ppr, toolbar child components that update themselves via ppr outside of a submit (like InputComboboxLOV) will work better when not in overflow.

In a nutshell, if you change the above tag snippet to refresh the af:toolbar (instead of child elements) as shown below, issue will be solved and you can see the partial page refresh works for <af:commandToolbarButton> without any side effects.

 <af:toolbar partialTriggers="someComp">  
 <af:commandToolbarButton ... />  
 </af:toolbar>  

Comments

Ravi said…
Jobinesh,

Nice post!!

I have similar issue in my code. But I see the Button overflow issue first time on page load. On page load there is no way partialTrigger gets executed.

How can I stop button overflow from toolbar on page load?

Thanks
Ravi

Disclaimer

The views expressed on this blog are my own and do not necessarily reflect the views of my employer.