IssueTracker

1.1 snapshot 12452844

Some of the predictive back animations don't run when the modifiers are in the AnimatedPane itself. The modifiers have to be moved in the AnimatedPane for the PB cancel action, and back-to-home animations to run.

It would be a bad developer experience to have to wrap their UI in a box so that modifiers can be placed in that box, so that the PB animations can run.

Code sample:

Modifier inside Animated Pane (PB animations work)

NavigableListDetailPaneScaffold(
        navigator = scaffoldNavigator,
        modifier = modifier,
        listPane = {
            AnimatedPane {
                Box(
                    Modifier
                        .background(Color.LightRed)
                        .safeContentPadding()) {
                    Column {
                        Text("This is the list pane", fontSize = 24.sp)
                        Spacer(Modifier.size(24.dp))

                        if (scaffoldNavigator.scaffoldValue[ListDetailPaneScaffoldRole.Detail] == PaneAdaptedValue.Hidden) {
                            Button(onClick = {
                                scope.launch {
                                    scaffoldNavigator.navigateTo(ListDetailPaneScaffoldRole.Detail)
                                }
                            }) {
                                Text("Show detail pane")
                            }
                        }
                    }
                }
            }
        },

Modifier in AnimatedPane itself (PB animations doesn't work)

NavigableListDetailPaneScaffold(
        navigator = scaffoldNavigator,
        modifier = modifier,
        listPane = {
            AnimatedPane(
                Modifier
                    .background(Color.LightRed)
                    .safeContentPadding()) {
                Column {
                    Text("This is the list pane", fontSize = 24.sp)
                    Spacer(Modifier.size(24.dp))
                    if (scaffoldNavigator.scaffoldValue[ListDetailPaneScaffoldRole.Detail] == PaneAdaptedValue.Hidden) {
                        Button(onClick = {
                            scope.launch {
                                scaffoldNavigator.navigateTo(ListDetailPaneScaffoldRole.Detail)
                            }
                        }) {
                            Text("Show detail pane")
                        }
                    }
                }
            }
        },

Repro:

1. Display a ThreePaneScaffold in a compact window
2. Move the modifier in the AnimatedPane itself
3. Try to cancel the back gesture or at the root activity, swipe back to start the back-home-animations (and see that it doesn't show up)