jsf - PrimeFaces inputText ajax event=valueChange fires AFTER commandButton clicked

Question

Using JSF and PrimeFaces 6.1 I have an inputText field as such:

<p:inputText value="#{backingBean.stringField}">
    <p:ajax event="valueChange" update="@form" />
</p:inputText>

and within the same form is a commandButton:

<p:commandButton id="btnDoThatThing" 
                 ajax="true" 
                 immediate="true"
                 update="@form"
                 process="@this"
                 action="#{backingBean.doThatThing}"/>

When I

1. make a change to the inputText field,
2. then click somewhere OTHER THAN the command button
3. click the command button

everything works exactly as expected. BUT if I:

1. make a change to the inputText field,
2. immediately the command button

the button is NOT fired since the first click of the commandButton is triggering the valueChange event to happen in the inputText field.

if I click it a second time the button action finally happens.

now, if i change the p:ajax event="valueChange" to p:ajax event="keyup" the first click of the commandButton work as expected, but unfortunately the keyup event on a inputField is pretty hacky and you lose functionality within the field (copy/paste text, text selection, 'fast' typing' etc)

any thoughts on how to initiate the change event in the inputText field, AND fire the commandButton action when the user clicks the button immediately from typing in the inputText field?

thanks for your time!

Answer 1

First your valueChange is triggered. This updates the form including the button. Not 100% sure if this is browser dependent, but in Chromium (Linux), the click on the previously rendered button (before it has been updated) is not executed.

I could get it working when I changed the update expression into a selector. My expression updates the elements I needed to be updated excluding the button(s). In my case:

<p:ajax update="@(form :input:not(button))" />

Note that the change event is default for inputs, so I've removed event="valueChange".

Of course you do not need to use a selector. You can also just update a component (like a panel) which does not contain the button:

<p:ajax update="yourPanel" />

Also, ajax="true" is default for a p:commandButton, so you can remove that.