OmniFaces highlight does not set focus with <p:ajax>

Question

I got a simple login form. I am using <p:ajax> to invoke a <p:blockUI> (see this question).

<h:commandButton id="anmeldung_button"
action="#{benutzerAnmeldung.anmelden}" value="Anmelden"
styleClass="btn btn-info btn-sm">
    <p:ajax process="@form" update="@form"/>
</h:commandButton>
<p:blockUI id="block" block=":anmeldung" trigger="anmeldung_button" />

I am using <o:highlight /> to highlight invalid inputs. This works fine. It is working with a <f:ajax> perfectly, too.

Apperently, it is not working with <p:ajax>.

How can I achieve this?

Shoup

Answer 1

This is caused by <p:ajax> trying to refocus the active element after executing the oncomplete scripts via doEval() (as can be seen in handleReFocus() function in core.ajax.js script. However, when you submit the form by clicking the command button instead of pressing Enter while inside the input, then that active element becomes the command button itself, not the input text. You can confirm this by just using Enter key to submit the form. You'll see that the focus is done right.

There are in your particular case 2 ways to workaround this:

1. Make use of PrimeFaces' own autofocus facility via <p:focus> which is placed inside the form as below:

   <h:form id="anmeldung">
       <p:focus context="anmeldung" />
       ...
   </h:form>
   

   It also automatically takes into account invalidated input fields.

2. Set PrimeFaces.customFocus to true in JavaScript, so that handleReFocus() function won't do its job.

   <script>PrimeFaces.customFocus = true;</script>
   

Hydnocarpate

It is working perfectly. I am using onfocus="this.value=this.value" in additon, to the cursor to the right position. – Shoup

Perhaps PF11 so is beter : ((HtmlInputText) element).setOnfocus("const v = this.value; this.value = ''; this.value = v;"); – Cirrose