3

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.

Phil Dukhov
  • 67,741
  • 15
  • 184
  • 220
Prasa Dev
  • 93
  • 9

2 Answers2

6

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

Phil Dukhov
  • 67,741
  • 15
  • 184
  • 220
  • What about if I want to trigger 2 keyEvents. If I copy & Paste the same for another button, only second one works. Any help? – Xavi Segura Ardévol Sep 08 '21 at 07:36
  • @XaviSeguraArdévol only one item can be focused in your app. Check out more about focus in compose in [this article](https://medium.com/google-developer-experts/focus-in-jetpack-compose-6584252257fe) (originally link in the answer was broken, updated it). Do you wanna listen key event for the whole app, or for specific views? As an example using `requester.requestFocus()` you can make button focused on click. – Phil Dukhov Sep 08 '21 at 08:04
  • @PhilipDukhov what tutorial do you suggest to start to learn jetpack compose in kotlin android – Edgar Sep 08 '21 at 08:11
  • @sashabeliy start with the [documentation](https://developer.android.com/jetpack/compose/documentation), it's pretty good and has a simple tutorial too – Phil Dukhov Sep 08 '21 at 08:12
  • Is important to note that, ins this stage of the API, after clicking in the window the focused box with mouse the focus appears to be lost. Is really needed handle this manually such as applying the focus again in a click? – Lucas Sousa Nov 10 '21 at 23:02
  • 1
    @LucasSousa This extra click handling shouldn't be needed if you put your views inside the `Box`. `onKeyEvent` should work fine if the focused view is inside the `Box`. Also consider using `Window` `onKeyEvent` as mentioned in the beginning of my answer if you need to track key events for the whole window. – Phil Dukhov Nov 11 '21 at 01:18
0

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()
  }
Lucas Sousa
  • 192
  • 3
  • 14