IssueTracker

Jetpack Compose version: 2024.09.03

Material Library Version (M2, M3 or Both?): M3

Material Compose component used: Scaffold with TopAppBar and LazyColumn as its content

Android Studio Build: Android Studio Ladybug | 2024.2.1 Build #AI-242.21829.142.2421.12409432

Kotlin version: 2.0.21

We are encountering an issue where the scroll behavior is being triggered by a scrollable element that does not have a nestedScroll, but is a child of a composable that does have nestedScroll. For instance, consider a scrollable TextField within a LazyColumn. While scrolling the LazyColumn, the TopAppBarState.contentOffset should update, and the top bar state should change as expected. However, when scrolling within the TextField it shouldn't.

Below is the MRE and a video demonstrating the issue:

@Composable
fun NestedScrollMre() {
    val scrollBehavior = TopAppBarDefaults.pinnedScrollBehavior()

    Scaffold(
        modifier = Modifier.fillMaxSize(),
        topBar = {
            TopAppBar(
                title = { Text("Hello") },
                scrollBehavior = scrollBehavior
            )
        }
    ) { innerPadding ->
        LazyColumn(
            modifier = Modifier
                .nestedScroll(scrollBehavior.nestedScrollConnection)
                .padding(innerPadding)
        ) {
            item("text_field") {
                var value by remember { mutableStateOf("") }
                TextField(
                    modifier = Modifier
                        .fillMaxWidth()
                        .height(300.dp)
                        .verticalScroll(state = rememberScrollState()),
                    value = value,
                    onValueChange = { value = it }
                )
            }
            List(100) {
                item(key = it) {
                    Text(text = it.toString())
                }
            }
        }
    }
}