How to trigger PC Keyboard inputs in Kotlin Desktop Compose

Viewed 808

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.

2 Answers

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

Following the second option of the Philip answer is possible to get a strange behavior when you set the focus and, for some reason, click inside application window. Doing this, is possible "lost" the focus and the key events are not propper handled.

In order to avoid this the suggestion is manually handle this problem by adding a click/tap modifier, which just specifies that when detect a click/tap the requester requests the focus again. See below:

val requester = FocusRequester()
  Box(
    Modifier
       //pointer input handles [onPress] to force focus to the [requester]
      .pointerInput(key1 = true) {
        detectTapGestures(onPress = {
          requester.requestFocus()
        })
      }
      .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()
      .fillMaxSize()
      .background(Color.Cyan)
  )
  LaunchedEffect(Unit) {
    requester.requestFocus()
  }
Related