0

I'm building my Android TV app using Jetpack Compose, and I'm trying to fire some onClick events on some Text components.

I've implemented the Modifier.focusable, so it can be focused using the remote control, and I've implemented Modifier.clickable to be launched when, well, the component is clicked.

However, when I launch the app on an emulator, I can focus and select the component properly, as I can see the change on the background color, but I can't fire the event inside Modifier.clickable when pressing on the OK button on my remote control (in my case it's KEYCODE_DPAD_CENTER). The event is fired if I click with the mouse inside the emulator, however.

Here is my code

   @Composable
   fun FocusablePill(text: String, focusRequester: FocusRequester = FocusRequester()) {

        val interactionSource = remember { MutableInteractionSource() }
        val isFocused by interactionSource.collectIsFocusedAsState()
        val isPressed by interactionSource.collectIsPressedAsState()
        val color = if (isFocused || isPressed) action else lightTranslucent_10
        val shape = RoundedCornerShape(CornerSize(24.dp))

        Text(
            text = text,
            color = MaterialTheme.colors.onPrimary,
            style = MaterialTheme.typography.button,
            modifier = Modifier
                .focusRequester(focusRequester)
                .focusable(
                    interactionSource = interactionSource
                )
                .clickable(
                    interactionSource = interactionSource,
                    indication = null //this is just cosmetic, setting LocalIndication.current still doesn't work
                ) {
                    onCommandEntered(text)
                }
                .background(color, shape)
                .padding(16.dp, 8.dp)
        )
    }

I've also tried with Modifier.selectable, but the result is the same. Event is only fired on mouse click. Also, using Button components doesn't work either.

vighnesh153
  • 4,354
  • 2
  • 13
  • 27
Aitor Gómez
  • 7,317
  • 3
  • 20
  • 28
  • Thanks @PhilipDukhov, but in this case, the problem is on the onClick event. The focus works fine. – Aitor Gómez Oct 05 '21 at 15:50
  • 1
    Try using the `onKeyEvent` modifier and see if it gives you any event when you press a remote control key. Perhaps it is perceived as a keyboard and not a mouse. If so, you probably need to [report it] (https://issuetracker.google.com/issues/new?component=612128). – Phil Dukhov Oct 06 '21 at 06:28
  • Hi @PhilipDukhov I added onKeyEvent and now I can check on (it.type == KeyUp && it.key == Key.DirectionCenter) so I can perform whatever I need, but still I find this as a workaround. I believe that, because I'm running on Android TV but inside a ComposeActivity, rather than a "leanback friendly" Fragment, the button clicks are not being handled properly. However, navigation is. – Aitor Gómez Oct 06 '21 at 09:45
  • I agree that this is a workaround, [let compose maintainers know](https://issuetracker.google.com/issues/new?component=612128) what behavior you expect. – Phil Dukhov Oct 06 '21 at 10:03
  • 1
    @PhilipDukhov done. https://issuetracker.google.com/issues/202171423 Thank you! – Aitor Gómez Oct 06 '21 at 10:46

1 Answers1

4

For future reference, this was fixed and should be working as of 1.1.0-beta01. Both the Dpad center and the enter key will trigger a click on the focused view now. If you want to handle other keys (e.g., a game controller), you can use Modifier.onKeyEvent.

Ian G. Clifton
  • 9,349
  • 2
  • 33
  • 34