Why Tab Key Not working correctly in Primefaces Sheet Table?

UI Components for JSF
Post Reply
Shannonmaus
Posts: 8
Joined: 06 Mar 2023, 11:35

17 Mar 2023, 07:42

Tab key not working on primefaces sheet. If all fields are read only or editable tab key works i mean i can move to next field by pressing tab key. But if it is not same(one is read only and one is editable tab key not working). You can see on below i cannot move to next cell because one is read only and other is editable. I tried to implement primefaces solution like giving scrollwidth to sheet but didnt work. How can i solve this issue ? Help will be appreciate. SkyWard Alpine

Hezamatthew
Posts: 3
Joined: 09 Nov 2022, 07:53

21 Mar 2023, 07:07

Shannonmaus wrote:
17 Mar 2023, 07:42
Tab key not working on primefaces sheet. If all fields are read only or editable tab key works i mean i can move to next field by pressing tab key. But if it is not same(one is read only and one is editable tab key not working). You can see on below i cannot move to next cell because one is read only and other is editable. I tried to implement primefaces solution like giving scrollwidth to sheet but didnt work. How can i solve this issue ? Help will be appreciate.
It sounds like the issue you are experiencing is related to the focusability of the read-only fields in the PrimeFaces sheet. When a field is read-only, it may not be receiving focus, and therefore the tab key cannot navigate to it. One solution you can try is to set the tabindex attribute on the read-only fields so that they can receive focus and be navigable via the tab key.

Here is an example of how you can set tabindex on a PrimeFaces sheet column:

Code: Select all

<p:column headerText="Read-Only Column" sortBy="#{item.property}" filterBy="#{item.property}" filterMatchMode="contains">
    <p:outputLabel value="#{item.property}" tabindex="1"/>
</p:column>
In this example, the tabindex attribute is set to 1, which means that this column will receive focus first when navigating via the tab key.

You can also set tabindex on editable fields, ensuring that they are also included in the tab key navigation order. For example:

Code: Select all

<p:column headerText="Editable Column" sortBy="#{item.property}" filterBy="#{item.property}" filterMatchMode="contains">
    <p:inputText value="#{item.property}" tabindex="2"/>
</p:column>
In this example, the tabindex attribute is set to 2, which means that this column will receive focus second when navigating via the tab key.

By setting tabindex on both read-only and editable fields, you should be able to navigate through all fields in the PrimeFaces sheet using the tab key.

Post Reply

Return to “PrimeFaces”

  • Information
  • Who is online

    Users browsing this forum: Google [Bot] and 25 guests