Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Compose Web - KeyEvent mappings #3644

Closed
sc941737 opened this issue Sep 8, 2023 · 4 comments
Closed

Compose Web - KeyEvent mappings #3644

sc941737 opened this issue Sep 8, 2023 · 4 comments
Assignees
Labels
bug Something isn't working p:high High priority reproduced web

Comments

@sc941737
Copy link

sc941737 commented Sep 8, 2023

Describe the bug
Observing KeyEvents via the Modifier.onKeyEvent (or the like) function shows that the key "t" is mapped to KEY_UNKNOWN, and the key "6" to KEY_T. As far as I can tell, other keys seem fine.

Affected platforms

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

Versions

  • Kotlin version*: 1.9.0
  • Compose Multiplatform version*: 1.5.0-beta02

To Reproduce

  1. Add onKeyEvent call to a modifier of any TextField or parent.
  2. Log the KeyEvent inside the lambda.
  3. Run the app, press buttons.
  4. Open browser console and see logs.

Expected behavior
T key should map to KEY_T
6 key to KEY_6

@sc941737 sc941737 added bug Something isn't working submitted labels Sep 8, 2023
@igordmn igordmn added web reproduced p:high High priority and removed submitted labels Sep 8, 2023
@igordmn
Copy link
Collaborator

igordmn commented Sep 8, 2023

Thanks for the report!

A reproducer:

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.size
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.focus.FocusRequester
import androidx.compose.ui.focus.focusRequester
import androidx.compose.ui.focus.focusTarget
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.input.key.key
import androidx.compose.ui.input.key.onKeyEvent
import androidx.compose.ui.input.key.type
import androidx.compose.ui.unit.dp

@Composable
fun Test() {
    val focusRequester = remember { FocusRequester() }
    Box(Modifier.size(1000.dp).background(Color.Red).focusRequester(focusRequester).focusTarget().onKeyEvent {
        println("" + it.key + " " + it.type)

        true
    }) {  }

    LaunchedEffect(Unit) {
        focusRequester.requestFocus()
    }
}

Reproduced in Chrome, Windows 11.

@igordmn
Copy link
Collaborator

igordmn commented Sep 12, 2023

We have 2 issues here:

  1. wrong mapped key codes for some keys in web.
  2. returning Key.Unknown instead of Key(keyCode). We should return Key(keyCode) even if there is no knowing mapping in Compose. Unknown should be returned only if the platform doesn't know about this key code.

@dhakehurst
Copy link

seem to be many issues with KeyEvents on web platform !

#2296

@eymar eymar self-assigned this Apr 8, 2024
@eymar
Copy link
Collaborator

eymar commented Apr 9, 2024

Reproduced with 1.5.0 and 1.6.0.

But it works correctly in 1.6.10-dev1571 (which contains key events related changes).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working p:high High priority reproduced web
Projects
None yet
Development

No branches or pull requests

4 participants