[Web][Wasm] Inconsistent onKeyEvent API across web/desktop + focus issue

[egorikftp]

Describe the bug
Desktop platform provides API to listen global key events inside Window function

fun main() {
    application {
        Window(
            onKeyEvent = {
                println("event: $it")
            },
            content = { App() }
        )
    }
}

On Wasm there is no such API, but since 1.6.10-beta01 (#2296, #3644) we can handle it following way

fun main() {
    val focusRequester = FocusRequester()
    CanvasBasedWindow(canvasElementId = "YourTarget") {
        Box(
            modifier = Modifier
                .fillMaxSize()
                .focusRequester(focusRequester)
                .focusTarget()
                .onKeyEvent {
                    println("event: $it")
                    false
                }
        ) {
            // nested content
        }
        SideEffect {
            focusRequester.requestFocus()
        }
    }
}

But in this case, if we open some nested screen, we lose focus and key events not passes to root modifier until we make root function focused again.

In demo page focuses on start and receive key events, after losing focus doesn't receive any events

Screen.Recording.2024-04-22.at.20.13.02.mov

For testing purpose we can make this hack, but it break all the app logic 🙂

// workaround to make window always focused
LaunchedEffect(Unit) {
    while (true) {
        delay(100)
        focusRequester.requestFocus()
    }
}

Can it be done without manual focus manipulation?

Affected platforms

• Web (K/Wasm) - Canvas based API
  Versions

Kotlin version: 2.0.0-RC1
Compose Multiplatform version: 1.6.10-beta01

[Schahen]

Hi @egorikftp - yep, we've tried to introduce basic support for virtual keyboard but missed a couple of very serious things to consider. In next beta this will be addressed in desktop browser and one beta release after that in mobile browsers as well.
Will close this issue whenever it will be completely gone.