*Issue*: Compose Navigation, if Focus on element "...

# compose

[Jaypalsinh Barad]

Issue: Compose Navigation, if Focus on element "Card 5" and navigate to some screen after press back focus is going to element "Card 4" instead of "Card 5"

I share video and code

Screen_recording_20250823_124500.mp4

[Jaypalsinh Barad]

package com.example.myapplication

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
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.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
import androidx.compose.foundation.lazy.itemsIndexed
import androidx.tv.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableIntStateOf
import androidx.compose.runtime.mutableStateListOf
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.saveable.Saver
import androidx.compose.runtime.saveable.rememberSaveable
import androidx.compose.runtime.setValue
import androidx.compose.runtime.snapshots.SnapshotStateList
import androidx.compose.runtime.toMutableStateList
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.focus.FocusRequester
import androidx.compose.ui.focus.focusRequester
import androidx.compose.ui.focus.onFocusChanged
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.RectangleShape
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.navigation.compose.NavHost
import androidx.navigation.compose.composable
import androidx.navigation.compose.rememberNavController
import androidx.navigation.toRoute
import androidx.tv.material3.Button
import androidx.tv.material3.ExperimentalTvMaterial3Api
import androidx.tv.material3.Surface
import com.example.myapplication.ui.theme.MyApplicationTheme
import kotlinx.coroutines.delay
import kotlinx.serialization.Serializable
import java.util.ArrayList

class MainActivity : ComponentActivity() {
    @OptIn(ExperimentalTvMaterial3Api::class)
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            val navController = rememberNavController()
            NavHost(
                navController = navController,
                startDestination = Route.Home
            ) {
                composable<Route.Home> {
                    val list = rememberSaveable { List(100) { "Card $it" } }
                    LazyColumn(
                        modifier = Modifier
                            .fillMaxSize(),
                        contentPadding = PaddingValues(40.dp),
                        verticalArrangement = Arrangement.spacedBy(20.dp)
                    ) {
                        itemsIndexed(
                            items = list,
                            key = { index, _ -> index }
                        ) { index, item ->
                            var isFocused by rememberSaveable { mutableStateOf(false) }
                            Box(
                                modifier = Modifier
                                    .size(height = 70.dp, width = 70.dp)
                                    .onFocusChanged {
                                        isFocused =it.isFocused || it.hasFocus
                                    }
                                    .background(Color.Red)
                                    .border(
                                        width = 5.dp,
                                        color = if (isFocused) Color.Blue else Color.Transparent
                                    )
                                    .clickable {
                                        navController.navigate(Route.Detail(item))
                                    }
                                    .focusable(),
                                contentAlignment = Alignment.Center
                            ) {
                                Text(text = item)
                            }
                        }
                    }
                }
                composable<Route.Detail> {
                    val value = it.toRoute<Route.Detail>().name
                    Box(
                        modifier = Modifier.fillMaxSize(),
                        contentAlignment = Alignment.Center
                    ) {
                        Column(
                            horizontalAlignment = Alignment.CenterHorizontally,
                            verticalArrangement = Arrangement.spacedBy(20.dp)
                        ) {
                            Text(text = value)
                            Button(
                                onClick = { navController.popBackStack() }
                            ) {
                                Text(text = "Go back")
                            }
                        }
                    }
                }
            }
        }
    }
}

@Serializable
sealed class Route() {
    @Serializable
    data object Home : Route()

    @Serializable
    data class Detail(val name: String) : Route()
}

[Jaypalsinh Barad]

any once facing this kind of issue?

[Shubham Singh]

It's not really an issue but the default compose behavior. Compose does not store/save the last focused item index. The responsibility for it falls upon the developer. Compose just focuses the first visible item at any given point in time.

[Jaypalsinh Barad]

If you see the video after the back press it does not even focus on the first index

[Shubham Singh]

Apologies, I meant the first completely visible item

[Jaypalsinh Barad]

Yes, but it's a weird issue