IssueTracker

Jetpack Compose version: 1.2.0-rc03

Jetpack Compose component(s) used: BasicTextField, LazyRow.

Android Studio Build: #AI-212.5712.43.2112.8609683, built on May 18, 2022

Kotlin version: 1.7.0

Description: I have a TextField inside horizontally scrollable Box as an item of the LazyRow. TextField has fixed width and horizontal padding so it's clipped until scrolled to. When I tap on the TextField, the first scrollable parent of the composable (LazyRow) gets scrolled but its child (Box with horizontalScroll modifier) is not which leads to broken UI.

How to Reproduce: Run code sample and tap on the TextField.

Code Sample to Reproduce:

BoxWithConstraints(modifier = Modifier.fillMaxSize()) {
        val maxWidth = this.maxWidth
        LazyRow(modifier = Modifier.fillMaxSize()) {
            item {
                Box(
                    modifier = Modifier
                        .fillParentMaxSize()
                        .background(Color.Blue)
                        .horizontalScroll(rememberScrollState())
                ) {
                    BasicTextField(
                        value = "Item #0: Text field",
                        onValueChange = {},
                        modifier = Modifier
                            .background(Color.White)
                            .padding(horizontal = maxWidth / 2)
                            .background(Color.Yellow)
                            .requiredSize(width = maxWidth, height = 64.dp),
                    )
                }
            }
            item {
                BasicText(text = "Item #1: Text", modifier = Modifier.fillParentMaxSize())
            }
        }
    }

Expected: Horizontally scrollable Box is scrolled first, the TextField is visible and not clipped. LazyRow is not scrolled.

Actual: The TextField is clipped, Horizontally scrollable Box is not scrolled at all, LazyRow is scrolled so the next item becomes visible.