IssueTracker

Jetpack Compose version: compose-bom = "2024.11.00"

Jetpack Compose component(s) used: LazyRow

Android Studio Build: Build #AI-242.23339.11.2421.12550806, built on October 24, 2024

Kotlin version: 2.0.10

Context: This is Android TV application.

Steps to Reproduce:

1. Focus LazyRow.
2. Start scrolling backward by holding KEYCODE_DPAD_LEFT.
3. While scrolling, ensure the item with index 20 is focused, which will add more than 200 items to the beginning of the list.
4. When items are added, observe LazyRow.

Expected behavior: Scrolling should continue smoothly and naturally, moving item by item. Actual behavior: The scroll jumps abruptly to nearly the beginning of the list.

Code Sample to Reproduce: To reproduce the issue, use the code below. Note: Changing PAGE_SIZE to 100 resolves the issue.

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.BackHandler
import androidx.activity.compose.setContent
import androidx.compose.foundation.BorderStroke
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.lazy.LazyRow
import androidx.compose.foundation.lazy.itemsIndexed
import androidx.compose.foundation.lazy.rememberLazyListState
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.runtime.Composable
import androidx.compose.runtime.Immutable
import androidx.compose.runtime.Stable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
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.unit.dp
import androidx.compose.ui.unit.sp
import androidx.tv.material3.Border
import androidx.tv.material3.Card
import androidx.tv.material3.CardDefaults
import androidx.tv.material3.Text

class SampleActivity : ComponentActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        setContent {
            SampleApp()
        }
    }

    @Composable
    fun SampleApp() {
        Box(
            modifier = Modifier.fillMaxSize()
        ) {
            BackHandler(enabled = true) {
                // Prevents app from navigating to the Android Launcher when the user presses the RCU Back
            }

            SampleScreen()
        }
    }
}

object SamplePagingUtil {
    const val PAGE_SIZE = 200
    const val BOUND_REACHED_INDEX = 20
}

object SampleUiConstants {
    const val NO_SCALE = 1F
    const val EVENT_CARD_SIZE = 200
    const val EVENT_CARD_SPACE_BY = 11
    const val EVENT_CARD_RADIUS = 6
    const val EVENT_CARD_FOCUSED_BORDER_WIDTH = 3
    const val EVENT_CARD_FOCUSED_BORDER_INSET = 5
    const val EVENT_CARD_FOCUSED_BORDER_RADIUS = 9
    const val FONT_SIZE = 50
}

@Stable
data class SampleEventListUiState(
    val list: SampleUiEventList = SampleUiEventList()
)

@Immutable
data class SampleUiEventList(
    val list: List<SampleEvent> = emptyList()
)

data class SampleEvent(val id: Int)

@Composable
fun SampleScreen() {
    var uiState by remember {
        mutableStateOf(
            SampleEventListUiState(
                list = SampleUiEventList(
                    (SamplePagingUtil.PAGE_SIZE..2 * SamplePagingUtil.PAGE_SIZE).map { index: Int -> SampleEvent(id = index) }
                )
            )
        )
    }

    fun handleFocusedEventChange(index: Int) {
        // if bound reached, add new page of events
        if (index <= SamplePagingUtil.BOUND_REACHED_INDEX) {
            val newList = (0 * SamplePagingUtil.PAGE_SIZE..2 * SamplePagingUtil.PAGE_SIZE).map { SampleEvent(id = it) }
            uiState = SampleEventListUiState(list = SampleUiEventList(newList))
        }
    }

    val lazyListState = rememberLazyListState(
        initialFirstVisibleItemIndex = SamplePagingUtil.PAGE_SIZE / 2
    )

    LazyRow(
        state = lazyListState,
        horizontalArrangement = Arrangement.spacedBy(SampleUiConstants.EVENT_CARD_SPACE_BY.dp)
    ) {
        itemsIndexed(
            items = uiState.list.list,
            key = { _, event -> event.id }
        ) { index, event ->
            SampleEventCard(
                modifier = Modifier
                    .onFocusChanged {
                        if (it.isFocused) {
                            handleFocusedEventChange(index = index)
                        }
                    }
                    .size(SampleUiConstants.EVENT_CARD_SIZE.dp),
                event = event
            )
        }
    }
}

@Composable
fun SampleEventCard(
    modifier: Modifier,
    event: SampleEvent
) {
    Card(
        modifier = modifier,
        colors = CardDefaults.colors(
            containerColor = Color.Black
        ),
        scale = CardDefaults.scale(focusedScale = SampleUiConstants.NO_SCALE),
        shape = CardDefaults.shape(shape = RoundedCornerShape(SampleUiConstants.EVENT_CARD_RADIUS.dp)),
        border = CardDefaults.border(
            focusedBorder = Border(
                border = BorderStroke(
                    width = SampleUiConstants.EVENT_CARD_FOCUSED_BORDER_WIDTH.dp,
                    color = Color.Blue
                ),
                inset = SampleUiConstants.EVENT_CARD_FOCUSED_BORDER_INSET.dp,
                shape = RoundedCornerShape(size = SampleUiConstants.EVENT_CARD_FOCUSED_BORDER_RADIUS.dp)
            )
        ),
        onClick = { }
    ) {
        Box(
            modifier = Modifier
                .background(Color.Gray)
                .fillMaxSize()
        ) {
            Text(
                modifier = Modifier.align(Alignment.Center),
                text = "${event.id}",
                style = TextStyle(fontSize = SampleUiConstants.FONT_SIZE.sp),
                color = Color.Red
            )
        }
    }
}