IssueTracker

Jetpack Compose version:

• SNAPSHOT 10111914, 1.5.0-alpha04, 1.5.0-alpha03

Jetpack Compose component used:

• UI

Android Studio Build:

• 2022.2.1 Patch 1 (#AI-222.4459.24.2221.9971841)

Kotlin version:

• 1.8.10

Sample code with steps to reproduce:

1. Navigate to one of the four boxes on the right side
2. Press back (BackHandler is called but menuFocusRequester.requestFocus() does nothing, see the attached screen recording)

Without focusGroup(), menuFocusRequester.requestFocus() works as expected.

In compose 1.4.3, it works even with focusGroup().

There is already a regression in 1.5.0-alpha01 where the first requestFocus() is ignored and subsequent ones are working.

TvScaffold(
    menu = {
        FocusableBox(
            modifier = Modifier
                .width(64.dp)
                .fillMaxHeight()
        )
    }
) {
    Box(
        modifier = Modifier
            .fillMaxSize()
            .padding(start = 80.dp)
            .focusGroup()
    ) {
        FocusableBox(
            modifier = Modifier
                .size(128.dp)
                .align(Alignment.TopStart)
        )

        FocusableBox(
            modifier = Modifier
                .size(128.dp)
                .align(Alignment.TopEnd)
        )

        FocusableBox(
            modifier = Modifier
                .size(128.dp)
                .align(Alignment.BottomStart)
        )

        FocusableBox(
            modifier = Modifier
                .size(128.dp)
                .align(Alignment.BottomEnd)
        )
    }
}

@OptIn(ExperimentalComposeUiApi::class)
@Composable
fun TvScaffold(
    modifier: Modifier = Modifier,
    menu: @Composable () -> Unit,
    content: @Composable () -> Unit
) {
    val context = LocalContext.current

    val contentFocusRequester = remember { FocusRequester() }
    val menuFocusRequester = remember { FocusRequester() }

    var hasContentFocus by remember { mutableStateOf(false) }

    Box(
        modifier = modifier.fillMaxSize()
    ) {
        Box(
            modifier = Modifier
                .fillMaxSize()
                .focusRequester(contentFocusRequester)
                .focusProperties {
                    left = menuFocusRequester
                    start = menuFocusRequester
                    exit = {
                        when (it) {
                            FocusDirection.Left -> menuFocusRequester
                            else -> FocusRequester.Cancel
                        }
                    }
                }
                .onFocusChanged { hasContentFocus = it.hasFocus }
        ) {
            content()
        }

        Box(
            contentAlignment = Alignment.CenterStart,
            modifier = Modifier
                .fillMaxSize()
                .focusRequester(menuFocusRequester)
                .focusProperties {
                    right = contentFocusRequester
                    end = contentFocusRequester
                    exit = {
                        when (it) {
                            FocusDirection.Right -> contentFocusRequester
                            else -> FocusRequester.Cancel
                        }
                    }
                }
        ) {
            menu()
        }

        BackHandler(enabled = hasContentFocus) {
            Toast.makeText(context, "Back pressed", Toast.LENGTH_SHORT).show()
            menuFocusRequester.requestFocus()
        }
    }
}

@Composable
fun FocusableBox(
    modifier: Modifier = Modifier
) {
    var isFocused by remember { mutableStateOf(false) }

    Box(
        modifier = modifier
            .onFocusChanged { isFocused = it.isFocused }
            .focusable()
            .background(if (isFocused) Color.Red else Color.Gray.copy(alpha = 0.5f))
    )
}