Custom focus on item of lazyrow androidtv jetpack compose

Question

so i have a jetpack compose tv project and on the home screen i have a tvlazycolumn and inside it i have item{} having multiple of these :

if (resultItem.thumbnailType?.name.equals(
                                "landscape",
                                ignoreCase = true
                            ) && !resultItem.assets.isNullOrEmpty()
                        ) {        //landscape
                            TextStyle(
                                text = resultItem.categoryName ?: "",
                                modifier = Modifier.padding(top = dimensionResource(R.dimen.sixteen_dp)),
                                color = colorResource(R.color.white)
                            )
                            TvLazyRow(
                                pivotOffsets = PivotOffsets(0.0F),
                                modifier = Modifier
                                    .padding(top = dimensionResource(R.dimen.eight_dp))
                                    .onFocusChanged { focusState ->
                                    }
                            ) {
                                items(resultItem.assets?.take(10) ?: emptyList()) { asset ->
                                    LandScapeCardWithWidth(
                                        image = asset.imageLandscape!!,
                                        title = asset.name,
                                        isViewAll = false,
                                        type = asset.type,
                                        itemClick = {
                                        },
                                        modifier = Modifier,
                                        hideTag = asset.hideTag.toString(),
                                        contentAvailability = asset.contentAvailability,
                                        size = dimensionResource(R.dimen.two_hundred_dp),
                                        onFocusChange = { isFocused ->
                                            if (isFocused) {
                                                assetSynopsys = asset.synopsis
                                                languageSize = asset.languages?.size.toString()
                                                assetImage = asset.imageTransparent
                                                focusedImageUrl = asset.imageLandscape
                                                assetRating = asset.viewerRating?.ratingName
                                                assetHour = asset.hours
                                                assetMin = asset.min
                                            }
                                        }
                                    )

                                }
                            }
                        }

now what want to do is go to a specific item in the row let say on the row above this row i was on 5th item then when i press down i come to the item which was below it which is default how focus works. but i want to the focus to go on the first item of the row .

Answer 1

if you have an lazyColumn and have many lazyRow inside it and want to move focus on the first item when focus entering that row you can use one focusRequester for the first item and a focusRestorer property for the lazyRow, something like this:

val firstItemFocusRequester = remember { FocusRequester() }

TvLazyRow(
        modifier = modifier
            .focusRestorer { firstItemFocusRequester },
    ) {
       itemsIndexed(myItems) { index, myItem ->
            MyItem(
                modifier = Modifier
                    .then(
                        if (index == 0)
                            Modifier.focusRequester(firstItemFocusRequester)
                        else
                            Modifier
                    )
            )
        }
    }