# requestFocusOnHierarchyActive

## Functions summary

|---|---|
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/wear/compose/foundation/requestFocusOnHierarchyActive.modifier#(androidx.compose.ui.Modifier).requestFocusOnHierarchyActive()()` This Modifier is used in conjunction with `https://developer.android.com/reference/kotlin/androidx/wear/compose/foundation/hierarchicalFocusGroup.modifier#(androidx.compose.ui.Modifier).hierarchicalFocusGroup(kotlin.Boolean)` and will request focus on the following focusable element when needed (i.e. this needs to be before that element in the Modifier chain). |

## Functions

### Modifier.requestFocusOnHierarchyActive

Artifact: [androidx.wear.compose:compose-foundation](https://developer.android.com/jetpack/androidx/releases/wear-compose) [View Source](https://cs.android.com/search?q=file:androidx/wear/compose/foundation/HierarchicalFocus.kt+function:requestFocusOnHierarchyActive) Added in [1.5.0](https://developer.android.com/jetpack/androidx/releases/wear-compose#1.5.0)

```
fun Modifier.requestFocusOnHierarchyActive(): Modifier
```

This Modifier is used in conjunction with `https://developer.android.com/reference/kotlin/androidx/wear/compose/foundation/hierarchicalFocusGroup.modifier#(androidx.compose.ui.Modifier).hierarchicalFocusGroup(kotlin.Boolean)` and will request focus on the following focusable element when needed (i.e. this needs to be before that element in the Modifier chain). The focusable element is usually a `https://developer.android.com/reference/kotlin/androidx/wear/compose/foundation/rotary/rotaryScrollable.modifier#(androidx.compose.ui.Modifier).rotaryScrollable(androidx.wear.compose.foundation.rotary.RotaryScrollableBehavior,androidx.compose.ui.focus.FocusRequester,kotlin.Boolean,androidx.compose.foundation.OverscrollEffect)` (or, in some rarer cases a `https://developer.android.com/reference/kotlin/androidx/compose/foundation/focusable.modifier#(androidx.compose.ui.Modifier).focusable(kotlin.Boolean,androidx.compose.foundation.interaction.MutableInteractionSource)` or `https://developer.android.com/reference/kotlin/androidx/compose/ui/focus/focusTarget.modifier#(androidx.compose.ui.Modifier).focusTarget()`)

Multiple `https://developer.android.com/reference/kotlin/androidx/wear/compose/foundation/requestFocusOnHierarchyActive.modifier#(androidx.compose.ui.Modifier).requestFocusOnHierarchyActive()` Modifiers shouldn't be siblings, in those cases they need to surround each with a `https://developer.android.com/reference/kotlin/androidx/wear/compose/foundation/hierarchicalFocusGroup.modifier#(androidx.compose.ui.Modifier).hierarchicalFocusGroup(kotlin.Boolean)`, and at most one of them should have active = true, to inform which `https://developer.android.com/reference/kotlin/androidx/wear/compose/foundation/requestFocusOnHierarchyActive.modifier#(androidx.compose.ui.Modifier).requestFocusOnHierarchyActive()` should get the focus.

NOTE: This shouldn't be used together with `https://developer.android.com/reference/kotlin/androidx/compose/ui/focus/FocusRequester#requestFocus(androidx.compose.ui.focus.FocusDirection)` calls in `https://developer.android.com/reference/kotlin/androidx/compose/runtime/LaunchedEffect.composable#LaunchedEffect(kotlin.coroutines.SuspendFunction1)`.

Example usage:

```kotlin
import androidx.compose.foundation.BorderStroke
import androidx.compose.foundation.background
import androidx.compose.foundation.border
import androidx.compose.foundation.clickable
import androidx.compose.foundation.focusable
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.text.BasicText
import androidx.compose.runtime.mutableIntStateOf
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.focus.onFocusChanged
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.wear.compose.foundation.hierarchicalFocusGroup
import androidx.wear.compose.foundation.requestFocusOnHierarchyActive

var selected by remember { mutableIntStateOf(0) }

Row(Modifier.fillMaxSize(), verticalAlignment = Alignment.CenterVertically) {
    repeat(5) { colIx ->
        Box(
            Modifier.hierarchicalFocusGroup(active = selected == colIx)
                .weight(1f)
                .clickable { selected = colIx }
                .then(
                    if (selected == colIx) {
                        Modifier.border(BorderStroke(2.dp, Color.Red))
                    } else {
                        Modifier
                    }
                )
        ) {
            // This is used to add a Gray background to the currently focused item, as seen by
            // the focus system.
            var focused by remember { mutableStateOf(false) }

            BasicText(
                "$colIx",
                style =
                    TextStyle(
                        color = Color.White,
                        fontSize = 20.sp,
                        textAlign = TextAlign.Center,
                    ),
                modifier =
                    Modifier.fillMaxWidth()
                        .requestFocusOnHierarchyActive()
                        .onFocusChanged { focused = it.isFocused }
                        .focusable()
                        .then(
                            if (focused) {
                                Modifier.background(Color.Gray)
                            } else {
                                Modifier
                            }
                        ),
            )
        }
    }
}
```