Make clickable react to NumPadEnter and Spacebar, too

[rock3r]

The Clickable modifier only reacts to the "main" Enter key. This PR makes it also respond to the numpad Enter key, and the spacebar key.

Fixes CMP-5732

Testing

Smoke tested on the desktop demo: clickable composables react as expected.

Added a lot of tests to ensure the behavior is correct for previous and new keys (there were no tests).

QA should probably test this.

Release Notes

Features - Multiple platforms

• The clickable modifier now responds to NumPadEnter and Spacebar, too, in addition to Enter.

[SudoDios]

Hi @rock3r @igordmn
How disable spacebar from clickable in 1.7.0 ?

[rock3r]

First thing that comes to mind is an onPreviewKeyEvent that returns true when the key is a space at, placed after clickable

[SudoDios]

But this return unknown code key in window key event.

[rock3r]

Not sure what that means

[michaellee123]

我真的不知道你们脑袋里面在想什么，作为桌面端程序，按空格键预览图片不是很常见的操作吗？你这样搞了之后，我这边事件全部错乱了呀，能不能好好的改bug，别加这些莫名其妙的特性？这样真的很烦！

[SudoDios]

@michaellee123
Exactly, I also had a problem 👍

[badmannersteam]

Hello, @rock3r, @igordmn

This change made spacebar completely unusable as a global hotkey for the whole window (I've used it as a "pause" in my app).
If I define a onPreviewKeyEvent in Window and return true for spacebar after handling, this partially returns the previous behavior, but not with the text fields - when pressing spacebar in text fields event still propagates to the window handler.

Also global hotkeys already were a pain because of https://youtrack.jetbrains.com/issue/CMP-1925, but at least it worked with the help of onKeyEvent { it.key != Key.Tab } on every TextField (anyway this is still not a good solution, because every default TextField, where this modifier was forgotten, calls global hotkeys when typing).

I use the following code now:

Window(
    ...
    onKeyEvent = ::handleEvent,    // my default handler before this MR
    onPreviewKeyEvent = { if (it.key == Key.Spacebar) handleEvent(it) else false }  // workaround for this MR only for Space key
) {
    TextField(
        ...
        modifier = Modifier.ignoreGlobalHotkeys(),
    )
}

// https://youtrack.jetbrains.com/issue/CMP-1925
// this stops propagation of all events except Tab to window
fun Modifier.ignoreGlobalHotkeys() = onKeyEvent { it.key != Key.Tab }

fun handleEvent(event: Event) = when(it.key) {
    Key.Spacebar -> {
         // do some logic
         true
    }
    // other keys
    else -> false
}

So now i must choose between:

1. spacebar works as enter and doesn't work as global hotkey if any clickable is focused (because of this MR)
2. spacebar works as global hotkey ignoring clickables, but when i typing into textfields i can't disable it, because window onPreviewKeyEvent handler is the only place to override this MR change and in handler i can't identify the event source (textfield or not)

Maybe you can give me any advice?

[rock3r]

@badmannersteam the issue you're seeing seems more due to CMP-1925 than this change, tbh

It's correct for spacebar and numpadenter to trigger click on the focused component — that is what all UI frameworks do. The bug is probably separate here — is clickable using an onPreviewKeyEvent handler that intercepts the keypress before others do? That would be wrong.

I'd suggest opening a bug on YouTrack though, because a merged PR is not really a good place to file issues...

PS: you could consider finding the root cause of the issue and opening a PR to fix it if it's urgent for you — that is what I did here.

[badmannersteam]

@rock3r

It's correct for spacebar and numpadenter to trigger click on the focused component — that is what all UI frameworks do

I agree with Enters, but not with Space - nor system Windows apps like Explorer, nor crosplatform apps like Chrome perform click with Space, only with Enters.

I'd suggest opening a bug on YouTrack though, because a merged PR is not really a good place to file issues...

Yes, will do this, just asking before - maybe there is an obvious solution that I didn't find.

you could consider finding the root cause of the issue and opening a PR to fix it

I'm afraid that my understanding of current implementation of keyboard handlers is not enough.
Also default Tab/Enter navigation looks a bit hardcoded and imho requires a revision from core team to add some configuration/overriding posibilities.

Thanks for your answer.

[igordmn]

nor system Windows apps like Explorer

I checked Windows 11 native apps, and they perform the action on Space for most clickable components when they are in focus:

• File Explorer
• Calculator
• Paint
• Settings
• File properties
• Start menu

clickable is very opinionated component, and it is by design that its behaviour can change across versions.

If you need customization of clicks/key handling, you should use Modifier.onClick instead, not add it to clickable.