Compose Multi-Platform Dialog Key Events

Key presses can be detected at the window level as well as for individual controls (e.g. TextFields). At the window level the onPreviewKeyEvent parameter can be set with some code to be run each time a key is pressed.

Key events have data attached specifying:

• If it was a key press or a key release
• What key was pressed, e.g. Key.A, Key.Up or Key.Enter
• Any modifier keys (e.g. CTRL or ALT)

More info on key handling can be found here and a full list of key codes can be found here.

                var status by mutableStateOf("Press a key...")

                fun main() = singleWindowApplication(
                    title = "Key Press Events",
                    onPreviewKeyEvent = { handleKeyEvent(it) }
                ) {
                    App()
                }

                @Composable
                fun App() {
                    Column() {
                        Text(status)
                    }
                }

                // Show the key pressed/released as status message
                // Return true if key event was 'consumed'
                fun handleKeyEvent(event:KeyEvent): Boolean {
                    if (event.type == KeyEventType.KeyDown) {
                        status = "You pressed ${event.key}"
                        return true
                    }
                    if (event.type == KeyEventType.KeyUp) {
                        status = "You released ${event.key}"
                        return true
                    }
                    return false   // Key event was not consumed
                }
            

Key presses can be used to open / close Dialog Windows.

In this example the I key opens the dialog and the ESC key closes it. The main window handles the I key, but the dialog window handles the ESC key (since it has the focus when it is open).

                var isDialogOpen by mutableStateOf(false)

                fun main() = singleWindowApplication(
                    title = "Window with Dialog",
                    onPreviewKeyEvent = {
                        if (
                            it.key == Key.I &&
                            it.type == KeyEventType.KeyDown
                        ) {
                            isDialogOpen = true
                            true
                        } else {
                            false
                        }
                    }
                ) {
                    App()
                }

                @Composable
                fun App() {
                    Column() {
                        Text("For more info, press I")
                    }

                    if (isDialogOpen) {
                        Dialog()
                    }
                }

                @Composable
                fun Dialog() = DialogWindow(
                    title = "Dialog Window",
                    onCloseRequest = { isDialogOpen = false },
                    onPreviewKeyEvent = {
                        if (
                            it.key == Key.Escape &&
                            it.type == KeyEventType.KeyDown
                        ) {
                            isDialogOpen = false
                            true
                        } else {
                            false
                        }
                    }
                ) {
                    Column() {
                        Text("Here is some information")
                    }
                }