# Focus Event ## Basic Concepts - Focus Focus points to a unique interactive element in the current window. When a user indirectly interacts with an application by using a non-directional input device such as a keyboard, a television remote control, or a vehicle-mounted joystick/knob, focus-based interaction is an important input means. - Default focus After an application opens or switches to a page, the first focusable component (if any) in the component tree of the page is the default focus. You can [set the default focus](#setting-default-focus) as needed. - Focused A focused component is one that has focus. Only one end-point component in the application can receive focus at one time, and all the component's ancestor components along the focus chain are focused. If you want a component to be focused, ensure that the component and all its ancestor components are focusable (the [focusable](#setting-whether-a-component-is-focusable) attribute is set to **true**). - Not focused A component is not focused when it loses focus. In this case, all its ancestor components and the components not on the same focus chain as the focused component are not focused. - Focus navigation Focus navigation refers to a process in which the focus is transferred in the current application. It causes the original focused component to lose focus and a previously not focused component to receive focus. Focus navigation in applications can be classified into the following types by behavior: - Active navigation: A component is assigned focus due to subjective actions by developers or users, such as pressing the Tab or arrow keys on the external keyboard, using the [requestFocus](#focuscontrolrequestfocus) API, or clicking the component when the [focusOnTouch](#focusontouch) attribute is set to **true**. - Passive navigation: A component is assigned focus due to logical operations by the system. This focus navigation mode cannot be set by developers. For example, the system may assign focus to a component when the **if-else** statement is used to delete the focused component or set the focused component (or its parent component) to be unfocusable or when the page is switched. - Focused state The focused state refers to the style of the focused component. It is similar among different components and is not visible by default. The focused state is visible only when the Tab or arrow keys on the external keyboard are pressed to move focus. The Tab key or arrow key that triggers the focused state for the first time does not trigger focus navigation. When the application receives a touch event (including a finger press event on the screen and a press event of a left mouse button), the focused state style is automatically hidden. The focused state style is defined by the backend component and cannot be modified by developers. ## Rules of Focus Navigation Focus navigation follows the set rules regardless of whether it is active or passive focus navigation. By default, these rules are defined by the focus system and subject to the container where focus is located. - Linear navigation: used in components where child components are arranged linearly, such as the **\**, **\**, **\**, and **\** components. The focus navigation direction is the same as the direction of the arrow keys. **Figure 1** Linear navigation ![en-us_image_0000001562700537](figures/en-us_image_0000001562700537.png) For example, in the **\** container, you can use the left and right arrow keys (←/→) to move focus between two adjacent focusable components. - Cross navigation: used when the up (↑), down (↓), left (←), and right (→) arrow keys are pressed to move focus. The following figure shows a **\** container where cross focus navigation is frequently seen. **Figure 2** Cross focus navigation in the \ component ![en-us_image_0000001511740580](figures/en-us_image_0000001511740580.png) >**NOTE** > - With the previous focus navigation rules, the functions of the Tab/Shift+Tab keys are the same as those of the arrow keys. Pressing the Tab key is equivalent to pressing the right arrow key and then, if the focus cannot be moved, the down arrow key. Pressing the Shift+Tab key is equivalent to pressing the left arrow key and then, if the focus cannot be moved, the up arrow key. > > - The key that triggers focus navigation is the press event (Down event). > > - After a component is deleted or set to be unfocusable, the linear navigation rule is followed. The focus automatically moves to the sibling component in front of the deleted or unfocusable component. If that component cannot receive focus, the focus is then moved to the sibling component on the rear. - tabIndex-based navigation: Focus navigation with the Tab/Shift+Tab keys becomes sequential when the [tabIndex](../reference/arkui-ts/ts-universal-attributes-focus.md) attribute is set for the components. - Area-based focus: You can define the order of sequential focus navigation and the default focused component, by setting the **tabIndex** attribute for a container component and the [groupDefaultFocus](#groupdefaultfocus) attribute. - Rule for focusing on a container component: When a container component (for which **groupDefaultFocus** is not set) receives focus for the first time, the positions of its child components are calculated to identify the child component closest to the center of the container. The focus moves to this identified child component. If the container is not focused for the first time, the focus automatically moves to the child component that is focused last time in the container. - Focus interaction: When a component is focused, the inherent click task of the component or the **onClick** callback task bound is automatically mounted to the space or carriage return key. When the key is pressed, the task is executed, just as in the case of a finger or mouse click. >**NOTE** > >The focus involved in this topic refers to component focus. In real-world applications, the focus can also be window focus, which points to the currently focused window. When a window loses focus, all focused components in the window lose focus. ## Listening for Focus Changes ```ts onFocus(event: () => void) ``` Triggered when the bound component obtains focus. ```ts onBlur(event:() => void) ``` Triggered when the bound component loses focus. The **onFocus** and **onBlur** APIs are usually used in pairs to listen for the focus changes of the component. The following sample code shows how to use these APIs: ```ts // xxx.ets @Entry @Component struct FocusEventExample { @State oneButtonColor: Color = Color.Gray; @State twoButtonColor: Color = Color.Gray; @State threeButtonColor: Color = Color.Gray; build() { Column({ space: 20 }) { // You can use the up and down arrow keys on an external keyboard to move the focus between the three buttons. When a button gains focus, its color changes. When it loses focus, its color changes back. Button('First Button') .width(260) .height(70) .backgroundColor(this.oneButtonColor) .fontColor(Color.Black) // Listen for the focus obtaining event of the first component and change its color when it obtains focus. .onFocus(() => { this.oneButtonColor = Color.Green; }) // Listen for the focus loss event of the first component and change its color when it loses focus. .onBlur(() => { this.oneButtonColor = Color.Gray; }) Button('Second Button') .width(260) .height(70) .backgroundColor(this.twoButtonColor) .fontColor(Color.Black) // Listen for the focus obtaining event of the second component and change its color when it obtains focus. .onFocus(() => { this.twoButtonColor = Color.Green; }) // Listen for the focus loss event of the second component and change its color when it loses focus. .onBlur(() => { this.twoButtonColor = Color.Grey; }) Button('Third Button') .width(260) .height(70) .backgroundColor(this.threeButtonColor) .fontColor(Color.Black) // Listen for the focus obtaining event of the third component and change its color when it obtains focus. .onFocus(() => { this.threeButtonColor = Color.Green; }) // Listen for the focus loss event of the third component and change its color when it loses focus. .onBlur(() => { this.threeButtonColor = Color.Gray ; }) }.width('100%').margin({ top: 20 }) } } ``` ![en-us_image_0000001511740584](figures/en-us_image_0000001511740584.gif) The preceding example includes four steps: 1. When the application is opened, the **First Button** component obtains the focus by default, its **onFocus** callback is triggered, and its background color turns green. 2. When the Tab key (or the down arrow key) is pressed, **First Button** is in focused state, that is, there is a blue closed box outside the component. If no focus navigation is triggered, the focus remains on **First Button**. 3. When the Tab key (or the down arrow key) is pressed, the **Second Button** component is focused, its **onFocus** callback is triggered, and its background color turns green. **First Button** loses focus, its **onBlur** callback is triggered, and its background color turns gray. 4. When the Tab key (or the down arrow key) is pressed, the **Third Button** component is focused, its **onFocus** callback is triggered, and its background color turns green. **Second Button** loses focus, its **onBlur** callback is triggered, and its background color turns gray. ## Setting Whether a Component Is focusable Use the **focusable** API to set whether a component is focusable. ```ts focusable(value: boolean) ``` Components can be classified into the following types based on their focusability: - Components that are focusable by default: These components are usually interactive components, such as **\