orbit-compose icon indicating copy to clipboard operation
orbit-compose copied to clipboard

BringIntoViewRequester breaks screen with collapsible AppBar

Open alaegin opened this issue 2 years ago • 1 comments

Hello!

Firstly, I'd like to say thank you to all of you, guys. A big work was done in this repository.

I found one issue with BringIntoViewRequester and the collapsible app bar. I've modified TextFieldScreen sample from the repository: replaced its TopAppBar with TopAppBarLarge.

Then, if I click on any text field the scrollable Box animates its scroll to the clicked field (this is how BringIntoViewRequester works). But, the nested scroll doesn't handle it at all, and all scroll process results in broken UI:

Code

@Composable
internal fun TextFieldScreen(onNavigateUp: () -> Unit) {
    val scrollBehavior = TopAppBarScrollBehavior.exitUntilCollapsed()

    Scaffold(
        modifier = Modifier.nestedScroll(scrollBehavior.nestedScrollConnection),
        topBar = {
            TopAppBarLarge(
                title = { Text("Text Field") },
                onNavigateUp = onNavigateUp,
                scrollBehavior = scrollBehavior,
                largeElevated = false,
            )
        },
        backgroundColor = OrbitTheme.colors.surface.subtle,
        content = { contentPadding ->
            Box(
                Modifier
                    .fillMaxSize()
                    .verticalScroll(rememberScrollState())
                    .padding(contentPadding),
            ) {
                TextFieldScreenInner()
            }
        },
    )
}

Seems like we need to synchronize nested scroll with vertical scroll somehow. Do you have any ideas how to fix it?

alaegin avatar Jan 23 '23 19:01 alaegin

Thanks for reporting this! It is not only an issue with "bringIntoViewRequester", but it can be reproduced by any explicit (animated) scroll on scrollState.

E.g. this doesn't work as well:

    val scrollBehavior = TopAppBarScrollBehavior.exitUntilCollapsed()
    val scrollState = rememberScrollState()
    
    LaunchedEffect(Unit) {
        scrollState.animateScrollTo(400)
    }
    Scaffold(
        modifier = Modifier.nestedScroll(scrollBehavior.nestedScrollConnection),

The only relevant thing I've found here seems to be work-as-intended:

Hi, thanks for reporting this. For now this is expected as nested scrolling is only activated through gesture based scrolling, not animation based scrolling. We do have plans to explore animation based nested scrolling in the future, so I'll keep you posted if things change. Closing this ticket for now as this is WAI.

hrach avatar Jan 24 '23 09:01 hrach