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
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?
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.
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.