Incorrect pointerInput handling when scaling animations are used on Dialog

[BenniHackstock]

When using the Dialog and DialogPanel Composables, I run into the following issue:

When opening the dialog, it will sometimes, not handle pointer input correctly, and instead always close the dialog on any click, even if it's within the bounds of the DialogPanel.

Please see the recording below, where I continuously open the modal, and hover over the buttons. (In the beginning I am opening the dialog by clicking the button, later on i dismiss it via esc key and open it by pressing the space-key, which presses the focused "Show dialog" button.)

The first few tries, it all works well, but sometimes, the hover indications are broken, and all clicks will result in the dialogs being closed.

Note that this happens more frequently, if the modal dialog is larger, when it's very small it almost never happens.

It seems to be caused by

pointerInput(Unit) { detectTapGestures { } }

modifier on the AnimateVisibility composable inside the DialogPanel composable.

I am guessing it's caused by a small or zero-sized area on which this pointerInput is initially applied, but I am not sure. Changing the enter animation to something that does not scale (eg: fadeIn) stops the behavior.

https://github.com/user-attachments/assets/ce8e98b1-e372-4c44-a863-2d0ec9921492

Exact code to replicate from the video:

@OptIn(ExperimentalComposeUiApi::class)
fun main() = application {
    Window(onCloseRequest = ::exitApplication) {
        val dialogState = DialogState()

        Box(
            modifier = Modifier.fillMaxSize()
        ) {
            Button(
                modifier = Modifier.align(Alignment.Center),
                onClick = {
                    dialogState.visible = true
                }) {
                Text("Show dialog")
            }

            Dialog(dialogState) {
                DialogPanel(
                    enter = scaleIn(tween(50)),
                    exit = scaleOut(tween(50))
                ) {
                    Row(
                        modifier = Modifier
                            .size(500.dp, 500.dp)
                            .padding(40.dp)
                            .background(MaterialTheme.colors.background)
                    ) {
                        Button(modifier = Modifier.padding(20.dp), onClick = {}) {
                            Text("Button 1")
                        }
                        Button(modifier = Modifier.padding(20.dp), onClick = {}) {
                            Text("Button 2")
                        }
                    }
                }
            }
        }
    }
}

[alexstyl]

Thanks for the detailed report. I was able to reproduce it.

[alexstyl]

Turns out this is not an Unstyled bug.

I can reproduce this using an AnimatedVisibility. I will open a bug for this on the CMP issue tracker so that the JetBrains folks can have a look. Keeping this open until then.

var visible by remember { mutableStateOf(false) }

    Button(
        modifier = Modifier.align(Alignment.Center),
        onClick = {
            visible = true
        }) {
        Text("Show dialog")
    }

    LaunchedEffect(visible) {
        if (visible) {
            delay(1000)
            visible = false
        }
    }
    AnimatedVisibility(
        visible = visible,
        enter = scaleIn(tween(50)),
        exit = scaleOut(tween(50))
    ) {
        Row(
            modifier = Modifier
                .size(500.dp, 500.dp)
                .padding(40.dp)
                .background(Color.White)
        ) {
            Button(modifier = Modifier.padding(20.dp), onClick = {}) {
                Text("Button 1")
            }
            Button(modifier = Modifier.padding(20.dp), onClick = {}) {
                Text("Button 2")
            }
        }
    }

[alexstyl]

Actually it makes more sense to keep open until things fixed from Compose's side

[alexstyl]

Opened on CMP: CMP-9341 Cannot mouse over clickable elements inside of AnimatedVisibility while scale animation