Cursor caret always changing after AJAX request

Question

I'm trying to keep a button on a JSF page disabled as long as all the input fields on the page are not entered.

The first thing I've tried is to use partial triggers on the button, with an EL expression on the "Disabled" property, and adding partial triggers on the button with the IDs of the input fields. To make this work I also set "AutoSubmit" to true on all the input fields.

<af:inputText label="First Name" id="fn_input" autoSubmit="true">
       <f:validator validatorId="NameValidator"/>
</af:inputText>
<af:inputText label="Last Name" id="ln_input" autoSubmit="true">
       <f:validator validatorId="NameValidator"/>
</af:inputText>
<af:button text="Submit" id="submit_btn" partialTriggers="fn_input ln_input" disabled="#{empty bindings.FirstName.inputValue or empty bindings.LastName.inputValue}"/>

This works, however, when both input fields are filled, the button only gets enabled when the user clicks outside of the field (or focuses out of it by pressing tab or clicking somewhere else).

So the second method I tried was to use an ajax call on the input field's "keyPress" event, and refreshing the button.

<af:inputText label="First Name" id="fn_input" autoSubmit="true">
       <f:ajax render="submit_btn" event="keyPress" />
       <f:validator validatorId="NameValidator"/>
</af:inputText>
<af:inputText label="Last Name" id="ln_input" autoSubmit="true">
       <f:ajax render="submit_btn" event="keyPress" />
       <f:validator validatorId="NameValidator"/>
</af:inputText>
<af:button text="Submit" id="submit_btn" disabled="#{empty bindings.FirstName.inputValue or empty bindings.LastName.inputValue}"/>

When using the above method, the required functionality is achieved, however, every time the user types a character in the field, the cursor goes back to the beginning of the field.

Using Chrome's inspection tools, I tracked the ajax call, and found out that the button is being refreshed as well as the button, thus resulting in resetting the cursor caret to the start of the word.

How do I solve this issue?

Note:

• I am using release 12c.

• The submit button and the input texts are not in the same panelFormLayout, because of design and layout requirements.

Thanks in advance.

Answer 1

Coming back to this question to post what eventually worked for me. It was a bug with the 12.2.1.3 version of ADF. After upgrading to 12.2.1.4 the cursor caret stopped going back to the beginning of the inputs but the button would still stay disabled.

Replacing the ajax event from "keyPress" to "keyUp" did the trick.

<af:inputText label="First Name" id="fn_input" autoSubmit="true" value="#{bindings.FirstName.inputValue}">
       <f:ajax render="submit_btn" event="keyUp" />
       <f:validator validatorId="NameValidator"/>
</af:inputText>
<af:inputText label="Last Name" id="ln_input" autoSubmit="true" value="#{bindings.LastName.inputValue}">
       <f:ajax render="submit_btn" event="keyUp" />
       <f:validator validatorId="NameValidator"/>
</af:inputText>
<af:button text="Submit" id="submit_btn" disabled="#{empty bindings.FirstName.inputValue or empty bindings.LastName.inputValue}"/>