Managing Focus

Ionic provides a setFocus API on components such as Input, Searchbar, and Textarea that allows developers to manually set focus to an element. This API should be used in place of the autofocus attribute and called within:
The autofocus attribute is a standard HTML attribute that allows developers to set focus to an element when a page loads. This attribute is commonly used to set focus to the first input element on a page. However, the autofocus attribute can cause issues in routing applications when navigating between pages. This is because the autofocus attribute will set focus to the element when the page loads, but will not set focus to the element when the page is revisited. Learn more about the autofocus attribute in the MDN Web Docs.
There are platform restrictions you should be aware of when using the setFocus API, including:
The example below demonstrates how to use the setFocus API to request focus on an input when the user clicks a button.
Developers can use the ionViewDidEnter lifecycle event to set focus to an element when a page is entered.
Developers can use the didPresent lifecycle event to set focus to an element when an overlay is presented.
By default, Single Page Applications have no built-in way of informing screen readers that the active view has changed in a browser or webview. This means that users who rely on assistive technology do not always know if a navigation event occurred.
Developers who enable the focusManagerPriority config can delegate focus management to Ionic during page transitions. When enabled, Ionic will move focus to the correct element as specified in the config option. This will inform screen readers that a navigation event occurred.
The following table explains what each content type represents:
Developers should assign role="heading" and aria-level="1" to the primary Title on each view. Since multiple Title components can be used in a single view, Ionic does not automatically assign these attributes.
The config should be specified in order of decreasing priority. In the following example, Ionic will always focus headings to start. Ionic only proceeds to the next focus priority, banner, if a view does not have a heading: