IssueTracker

Versions

• Jetpack Compose version: 1.7.0-alpha05 (But reproducible even in 1.6.x and 1.5.x)
• Jetpack Compose component used: androidx.compose.ui.focus
• Android Studio Build: ``
• Kotlin version: 1.9.22

Steps to Reproduce or Code Sample to Reproduce:

1. Build a ModalNavigationDrawer
2. In the ModalNavigationDrawer's background content, add a grid (or column of rows) of cards.
3. In the ModalNavigationDrawer's drawer content, add a column of 3-4 NavigationDrawerItem.
4. Launch the app and notice the focus is on one of the cards in the Drawer's content.
5. Move focus to ModalNavigationDrawer.
6. Try moving focus from within drawer back to the cards. Notice that the focus doesn't move.
7. Open code and add some padding (56.dp) to the card's grid layout.
8. Move focus from cards to ModalNavigationDrawer and try moving focus back to the cards. Observe that this works because of padding.

Reproducible code

@OptIn(ExperimentalTvMaterial3Api::class, ExperimentalComposeUiApi::class)
@Composable
private fun ComposeOnlyApp() {
    MaterialTheme(darkColorScheme()) {
        ModalNavigationDrawer(drawerContent = { HomeOverlay() }) {
            Surface(modifier = Modifier.fillMaxSize(), shape = RectangleShape) {
                HomeCards()
            }
        }
    }
}

@OptIn(ExperimentalTvMaterial3Api::class, ExperimentalComposeUiApi::class)
@Composable
private fun NavigationDrawerScope.HomeOverlay() {
    val items = remember {
        listOf(
            "Home" to Icons.Default.Home,
            "Settings" to Icons.Default.Settings,
            "Star" to Icons.Default.Star,
        )
    }
    var selectedIndex by remember { mutableIntStateOf(0) }

    Column(
        modifier = Modifier
            .fillMaxHeight()
            .background(MaterialTheme.colorScheme.background.copy(alpha = 0.8f))
            .padding(12.dp),
        verticalArrangement = Arrangement.spacedBy(20.dp, Alignment.CenterVertically),
        horizontalAlignment = Alignment.CenterHorizontally,
    ) {
        items.forEachIndexed { index, item ->
            NavigationDrawerItem(
                selected = index == selectedIndex,
                onClick = { selectedIndex = index },
                leadingContent = {
                    Icon(imageVector = item.second, contentDescription = item.first)
                }
            ) {
                Text(text = item.first)
            }
        }
    }
}

@OptIn(ExperimentalTvMaterial3Api::class, ExperimentalComposeUiApi::class)
@Composable
private fun HomeCards() {
    TvLazyColumn(
        modifier = Modifier.fillMaxSize()
//            .padding(horizontal = 56.dp)
        ,
        contentPadding = PaddingValues(vertical = 20.dp),
        verticalArrangement = Arrangement.spacedBy(20.dp),
    ) {
        items(20) {
            val commonItemModifier = Modifier.width(164.dp).aspectRatio(16f / 9)

            TvLazyRow(
                modifier = Modifier.fillMaxWidth(),
                contentPadding = PaddingValues(horizontal = 20.dp),
                horizontalArrangement = Arrangement.spacedBy(20.dp),
            ) {
                items(20) {
                    Surface(
                        onClick = { },
                        modifier = commonItemModifier,
                        colors = ClickableSurfaceDefaults.colors(containerColor = Color.DarkGray),
                    ) {
                        Text(text = "$it")
                    }
                }
            }
        }
    }
}