Focus Management with PrimeFaces

Managing focus on input components with JSF can require quite some work since you need to write your own javascript that set focus on fields, know about clientIds and handle cases where validation fails. Also you need to do this for every page that has different set of component. In order to make focus management easier, I’ve added p:focus component to PrimeFaces which is a handy component that manages focus for you in various cases.

Default Focus

When focus is placed on a page, it finds the first visible editable input component and sets focus on it. This is simple as;

<p:focus />
<h:inputText disabled="true"/>
<h:inputText />

In this case second inputText will receive focus as first one is disabled.

Explicit Focus

You can also define a particular component to apply focus.

<p:focus for="text" />

<h:inputText id="text" />

Failed validations

This is where things get interesting, when validations fail focus knows about the first invalid field in component tree and sets focus on it. You just need to update focus component as well.

<p:focus id="focus" />

<p:panel header="New User" id="pnl">
    <h:panelGrid columns="2">
        <h:outputLabel for="firstname" value="Firstname: *" />
        <h:inputText id="firstname" required="true" />

        <h:outputLabel for="surname" value="Surname: *" />
        <h:inputText id="surname" required="true" />
    </h:panelGrid>
</p:panel>

<p:commandButton value="Submit" update="pnl focus" />

If required validations on firstname or surname fail, focus will applied on the first invalid component. So if firstname is valid and surname is invalid, surname will get focus. By default FacesMessages with Error severity are considered, this can be tuned with severity attribute of focus, so as an example you can choose to apply focus if message level is at least warning by setting severity to warn.

Focus Context
By default focus considers the all input fields in JSF page, if you like focus to work on a specific part of your page, use the context option. This is very handy in cases where you have a dialog open and want p:focus to consider the input fields in dialog only.

<p:focus id="focus" context="dialog"/>

<p:dialog header="New User" id="dialog">
    <h:panelGrid id="grid" columns="2">
        <h:outputLabel for="firstname" value="Firstname: *" />
        <h:inputText id="firstname" required="true" />

        <h:outputLabel for="surname" value="Surname: *" />
        <h:inputText id="surname" required="true" />
    </h:panelGrid>
</p:dialog>

<p:commandButton value="Submit" update="grid focus" />

In this case, input fields outside of the dialog are not considered.

Live Example
That’s it, in summary using p:focus, you can come up with a generic solution and save user from one extra click. If you’d like to see focus in action, check out the online showcase of PrimeFaces.

One Response to Focus Management with PrimeFaces

  1. Anonymous says:

    Thanks for explanations. We will intergrate this component

%d bloggers like this: