Set focus on an item that was partially displayed

Question

I have a form with an input element that updates a panel containing form elements in a blur event. I want the user to be able to navigate using the tab key. Thus, leaving the first input using the tab , should focus on the first form element of the displayed form.

Input element with blur event:

 <h:inputText class="text" id="profileLocation" value="#{cc.attrs.managedBean.profileLocation}"> <f:validateRegex pattern="([AZ]{2}[A-Z0-9])(?:\.(\d+))?(\.\d+)?(\.\d+)?" /> <f:ajax event="blur" render="assertionLocationPanel" listener="#{cc.attrs.managedBean.updateMessageLocation}"/> </h:inputText> 

It will display an assertionLocationPanel , defined as:

 <p:outputPanel id="assertionLocationPanel"> <h:inputText value="#{cc.attrs.managedBean.property}"> </h:inputText> </p:outputPanel> 

When using the tab key, the panel is updated, but the focus is not on the input element. I think this is because of the rendering. If the panel is not updated, the focus is on the correct item.

Decision

Call the javascript function specified in the onevent attribute:

 <f:ajax event="blur" render="profileLocationErrorMessage assertionLocationPanel" listener="#{cc.attrs.managedBean.updateMessageLocation}" onevent="setFocus"/> 

define the JS function as:

 <script type="text/javascript"> function setFocus() { $('#ConditionalComposite-ConditionalForm-1-ProfileLocation-segmentInstanceNumber').focus(); } </script> 

I had to call the JS function setFocus instead of calling $('#ConditionalComposite-ConditionalForm-1-ProfileLocation-segmentInstanceNumber').focus(); in the onevent attribute because it did not work. I saved the created identifiers, because I use composition, I also redefined javax.faces.SEPARATOR_CHAR to - .

If you use the regular separator : you need to output the separator as #ConditionalComposite\\:ConditionalForm1\\:ProfileLocation\\:segmentInstanceNumber .

Answer 1

Have you tried this:

First enter the id to enter the Text in the outpupanel.

 <p:outputPanel id="assertionLocationPanel"> <h:inputText value="#{cc.attrs.managedBean.property}" id="assertioninput"> </h:inputText> 

then add an ajax complete event like this and an incomplete focus on the input you need.

 <a4j:ajax event="complete" render="assertionLocationPanel" oncomplete="assertioninput.focus();"/> 

By the way, do not forget to set the form prependid = false to directly call the inputtext identifier