How to programmatically focus on an ion-item button?

Ionic Framework Ionic Angular
1

Hello,

I want to programmatically set focus on an ion-item button.

<ion-item button [routerLink]="['/tabs/tab1']">
    <ion-icon slot="start" name="home-outline"></ion-icon> Home
</ion-item>

However, there is no method available on the component for this purpose. I tried targeting ElementRef, but I couldn’t access the button inside or the generated link within the component.

When I focus on the ion-item element directly, it doesn’t delegate focus to the native element.

Do you have any idea how to accomplish this?

2

There are no methods for ion-item to set focus. However there is a method called setFocus() for ion-inputs that you can wrap your icon around. Of course some tyling would need to be done to your standards.

3

Thank you for your response.

I understand, but if I do that, I guess that the focus will be on the ion-input element, and therefore the link present on the ion-item will not be directly accessible.

So in my case, I replaced the ion-item with a custom component.

However, for accessibility reasons, it would be good to have the ability to focus on native elements present in the components to be programmatically accessible.

1 Like