Focus

The Focus component is a non-visual component that controls focus on the page. By using it, you can specify what component should be focused on page load and also save focus between page submissions. Note that there can be only one Focus component on the page.

API Reference | Tag Reference

Specifying Focus Component

To add the Focus component to the page, use the <q:focus> tag. When this component is added, focus is saved automatically. It is important that all HTML and JSF tags have their ids specified to store focus between submissions by using the Focus component.

The Focus component has a boolean autoSaveFocus attribute. By default, it is set to "true", which means that focus is saved between page submissions.

<h:form>
  <q:focus autoSaveFocus="true"/>
</h:form>

Specifying Focused Component on Page Load

You can specify what component should be focused when the page is loaded using the focusedComponentId attribute. In this attribute, you should specify the id of the component to be focused. The focusedComponentId attribute supports Expression Language.

The focusedComponentId attribute should be defined in the same way as the for property of the standard HTMLOutputLabel component:

• First, the Focus component tries to find the component specified in the focusedComponentId attribute. If the component is not found, the client-side id is used for getting the corresponding component on the client side. For example:

<h:form id="form1">
  <q:focus focusedComponentId="subview1:input1"/>
  ...
  <f:subview id="subview1">
    <h:inputText id="input1"/>
  </f:subview>
</h:form>

• If no component is found and focusedComponentId is prefixed with ':', this means that it is an absolute path and it is used as the client-side id of the component but without ':'. This is especially useful for HTML elements that are not related to JSF components. For example:

<h:form id="form1">
  <q:focus focusedComponentId=":input"/>
  ...
  <input id="input" type="text"/> 
</h:form>

• In other cases, the focusedComponentId attribute is regarded as a relative path to the component that is placed in the same container as the Focus component. Here an example:

<h:form id="form1">
  <q:focus focusedComponentId="treeTable"/>
  ...
  <q:treeTable id="treeTable" ...>...</q:treeTable>
</h:form>

If the autoSaveFocus attribute is set to "true", the id of the focused component is saved into the focusedComponentId attribute between page submissions.

Tracking Focus For the Entire Application

You can also specify the teamdev.jsf.autoSaveFocus context attribute in web.xml to "true" (the default is "false"). This attribute causes focus to be saved between form submissions for all application pages.

<context-param>
  <param-name>teamdev.jsf.autoSaveFocus</param-name>
  <param-value>true</param-value>
</context-param>