IssueTracker

Jetpack Compose version: 1.2.1 with compiler 1.3.1

Jetpack Compose component(s) used: LazyColumn

Android Studio Build: Android Studio Chipmunk | 2021.2.1 Patch 2 Build #AI-212.5712.43.2112.8815526, built on July 10, 2022

Kotlin version: 1.7.10

Steps to Reproduce or Code Sample to Reproduce:

1. create a LazyColumn with contents such that selecting an item causes it to change height with an animation whilst scrolling the LazyColumn to focus on that item, and deselects a previously selected item. Eg, when selected animate min height of the child view from 0 to 90% of the measured parent size within an animateFloat() and the corresponding modifier property whilst also invoking

    listState.animateScrollToItem(
        index,
        offset
    )

2. select an item, then select the item beneath it, causing the list to scroll down whilst simultaneously the item that was previously selected shrinks in height
3. the animateScrollToItem() or scrollToItem() call will not account for the change in height of the element above and result in an incorrect offset.
4. Furthermore, once in this state attempts to scroll manually upwards will result in a weird bouncing behaviour preventing scrolling until the user persists long enough - I think perhaps until they have attempted to scroll the offset between where the LazyColumn thinks it is to where the actual measured height is?

The same apparent issue is present with either animateScrollToItem or scrollToItem. The issue can be mitigated by delaying the LazyColumn scroll long enough for the collapse animation to complete, though this has consequences for the user experience and feels like a hack.

I would expect that the scroll position would be relative to the item index targeted and that changes to items above the target one would be inconsequential to the ending scroll position, though I can see how items changing their size could break assumptions when calculating scroll offsets, particularly when said size change is happening over time.

Code sample: I encountered this issue working on a fork of the Appyx project (branch tiles_in_columns, commit hash 0baf7214, composable defined in TileColumnExampleNode with animations defined in TileColumnTransitionHandler) - as it's using the Appyx framework to manage the selected/deselected transition animation it doesn't make the best showcase for the issue, but it should hopefully serve as a working example. You can launch the sandbox app, select "NavModel Examples" then "Tile Column example" to load up the screen seen in the video which demonstrates the issue.

See attached video demonstrating:

1. scrolling down the LazyColumn
2. selecting element Child (5), causing it to expand and the LazyColumn to scroll to position (5) in its center (note the top and bottom offsets, revealing the adjacent items)
3. selecting the element below, Child (6), causing simultaneously (5) to collapse, (6) to expand, and the LazyColumn to scroll downwards. Note that the list scrolls too far, positioning the top of (6) offscreen, despite it using the same offset as before.
4. deselecting (6) causing it to collapse
5. attempting to smoothly scroll upwards and instead seeing the LazyColumn struggle to bring (5) back into the view bounds