Search code examples
kotlinandroid-jetpack-composecompose-desktop

How to trigger PC Keyboard inputs in Kotlin Desktop Compose


I am going to develop a POS system using Kotlin Jetpack Compose and I wanna know how to trigger keyboard input events inside my project.


Solution

  • In Compose Desktop You can listen for key events using onKeyEvent Window parameter:

    Window(
        onCloseRequest = ::exitApplication,
        visible = visible,
        onKeyEvent = {
            if (it.isCtrlPressed && it.key == Key.A) {
                println("Ctrl + A is pressed")
                true
            } else {
                // let other handlers receive this event
                false
            }
        }
    ) {
        App()
    }
    

    An other options, which will also work for Compose in Android, is using Modifier.onKeyEvent. As documentation says:

    will allow it to intercept hardware key events when it (or one of its children) is focused.

    So you need to make an item or one of its children focusable and focused. Check out more about focus in compose in this article

    To do this you need a FocusRequester, in my example I'm asking focus when view renders using LaunchedEffect.

    For the future note, that if user taps on a text field, or an other focusable element will gain focus, your view will loose it. If this focused view is inside your view with onKeyEvent handler, it still gonna work.

    An empty box cannot become focused, so you need to add some size with a modifier. It still will be invisible:

    val requester = remember { FocusRequester() }
    Box(
        Modifier
            .onKeyEvent {
                if (it.isCtrlPressed && it.key == Key.A) {
                    println("Ctrl + A is pressed")
                    true
                } else {
                    // let other handlers receive this event
                    false
                }
            }
            .focusRequester(requester)
            .focusable()
            .size(10.dp)
    )
    LaunchedEffect(Unit) {
        requester.requestFocus()
    }
    

    Alternatively just add content to Box so it will stretch and .size modifier won't be needed anymore