Fix web key mappings

compose/mpp/demo/src/commonMain/kotlin/androidx/compose/mpp/demo/bug/BugReproducers.kt

@@ -27,5 +27,6 @@ val BugReproducers = Screen.Selection(
     IOSDynamicKeyboardType,
     NoPressInteractionInOutlinedTextField,
     WebBaselineAlways0,
-    ResizePopupCrashOnJS
+    ResizePopupCrashOnJS,
+    KeyEventMappingsBugReproducer
 )

compose/mpp/demo/src/commonMain/kotlin/androidx/compose/mpp/demo/bug/KeyEventMappings.kt

@@ -0,0 +1,50 @@
+/*
+ * Copyright 2024 The Android Open Source Project
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+package androidx.compose.mpp.demo.bug
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.size
+import androidx.compose.material.Text
+import androidx.compose.mpp.demo.Screen
+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
+
+
+// https://github.com/JetBrains/compose-multiplatform/issues/3644
+val KeyEventMappingsBugReproducer = Screen.Example("KeyEventMappingsBugReproducer (web)") {
+    val focusRequester = remember { FocusRequester() }
+    Box(Modifier.size(1000.dp).background(Color.Red).focusRequester(focusRequester).focusTarget().onKeyEvent {
+        println("" + it.key + " " + it.type)
+        false
+    }) {
+        Text("Try to press different keys and look at the console...")
+    }
+
+    LaunchedEffect(Unit) {
+        focusRequester.requestFocus()
+    }
+}

compose/ui/ui/src/jsWasmMain/kotlin/androidx/compose/ui/input/key/Key.jsWasm.kt

@@ -158,7 +158,7 @@ actual value class Key(val keyCode: Long) {
         actual val S = Key(83)
 
         /** 'T' key. */
-        actual val T = Key(54)
+        actual val T = Key(84)
 
         /** 'U' key. */
         actual val U = Key(85)

compose/ui/ui/src/webTest/kotlin/CanvasBasedWindowTests.kt

@@ -14,18 +14,30 @@
  * limitations under the License.
  */
 
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.size
+import androidx.compose.material.Text
 import androidx.compose.material.TextField
 import androidx.compose.runtime.SideEffect
+import androidx.compose.runtime.mutableStateOf
 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.KeyEvent
+import androidx.compose.ui.input.key.key
+import androidx.compose.ui.input.key.onKeyEvent
+import androidx.compose.ui.input.key.onPreviewKeyEvent
+import androidx.compose.ui.unit.dp
 import kotlin.test.Test
 import kotlinx.browser.document
 import org.w3c.dom.HTMLCanvasElement
 import androidx.compose.ui.window.*
 import kotlin.test.AfterTest
-import kotlin.test.Ignore
 import kotlin.test.assertEquals
 import kotlin.test.assertTrue
 import kotlin.test.assertFalse
@@ -77,19 +89,93 @@ class CanvasBasedWindowTests {
         })
 
         // dispatchEvent synchronously invokes all the listeners
-        canvasElement.dispatchEvent(createCopyKeyboardEvent())
+        canvasElement.dispatchEvent(createTypedEvent())
         assertEquals(1, stack.size)
         assertTrue(stack.last())
 
-        canvasElement.dispatchEvent(createTypedEvent())
+        canvasElement.dispatchEvent(createEventShouldNotBePrevented())
         assertEquals(2, stack.size)
-        assertTrue( stack.last())
-        assertEquals("c", changedValue)
+        assertFalse(stack.last())
 
-        canvasElement.dispatchEvent(createEventShouldNotBePrevented())
+        // copy shortcut should not be prevented (we let browser create a corresponding event)
+        canvasElement.dispatchEvent(createCopyKeyboardEvent())
         assertEquals(3, stack.size)
         assertFalse(stack.last())
     }
+
+    @Test
+    // https://github.com/JetBrains/compose-multiplatform/issues/3644
+    fun keyMappingIsValid() {
+        if (isHeadlessBrowser()) return
+
+        val canvasElement = document.createElement("canvas") as HTMLCanvasElement
+        canvasElement.setAttribute("id", canvasId)
+        document.body!!.appendChild(canvasElement)
+
+        val fr = FocusRequester()
+        var mapping = ""
+        CanvasBasedWindow(canvasElementId = canvasId) {
+            Box(Modifier.size(1000.dp).background(Color.Red).focusRequester(fr).focusTarget().onKeyEvent {
+                mapping = it.key.toString()
+                println(mapping)
+                false
+            }) {
+                Text("Try to press different keys and look at the console...")
+            }
+            SideEffect {
+                fr.requestFocus()
+            }
+        }
+
+        canvasElement.dispatchEvent(createTypedEvent('t'))
+        assertEquals("Key keyCode: 84", mapping)
+
+        canvasElement.dispatchEvent(createTypedEvent('6'))
+        assertEquals("Key keyCode: 54", mapping)
+    }
+
+    @Test
+    // https://github.com/JetBrains/compose-multiplatform/issues/2296
+    fun onPreviewKeyEventShouldWork() {
+        if (isHeadlessBrowser()) return
+        val canvasElement = document.createElement("canvas") as HTMLCanvasElement
+        canvasElement.setAttribute("id", canvasId)
+        document.body!!.appendChild(canvasElement)
+
+        val fr = FocusRequester()
+        val textValue = mutableStateOf("")
+        var lastKeyEvent: KeyEvent? = null
+        var stopPropagation = true
+
+        CanvasBasedWindow(canvasElementId = canvasId) {
+            TextField(
+                value = textValue.value,
+                onValueChange = { textValue.value = it },
+                modifier = Modifier.fillMaxSize().focusRequester(fr).onPreviewKeyEvent {
+                    lastKeyEvent = it
+                    return@onPreviewKeyEvent stopPropagation
+                }
+            )
+            SideEffect {
+                fr.requestFocus()
+            }
+        }
+
+        canvasElement.dispatchEvent(createTypedEvent('t'))
+        canvasElement.dispatchEvent(createTypedEvent('e'))
+        canvasElement.dispatchEvent(createTypedEvent('s'))
+        canvasElement.dispatchEvent(createTypedEvent('t'))
+        assertEquals(Key.T, lastKeyEvent!!.key)
+        assertEquals("", textValue.value)
+
+        stopPropagation = false
+        canvasElement.dispatchEvent(createTypedEvent('t'))
+        canvasElement.dispatchEvent(createTypedEvent('e'))
+        canvasElement.dispatchEvent(createTypedEvent('s'))
+        canvasElement.dispatchEvent(createTypedEvent('t'))
+        assertEquals(Key.T, lastKeyEvent!!.key)
+        assertEquals("test", textValue.value)
+    }
 }
 
 internal external interface KeyboardEventInitExtended : KeyboardEventInit {
@@ -106,8 +192,8 @@ internal fun createCopyKeyboardEvent(): KeyboardEvent =
         .withKeyCode()
         .keyDownEvent()
 
-internal fun createTypedEvent(): KeyboardEvent =
-    KeyboardEventInit(key = "c", code = "KeyC", cancelable = true)
+internal fun createTypedEvent(c: Char = 'c'): KeyboardEvent =
+    KeyboardEventInit(key = "$c", code = "Key${c.uppercase()}", cancelable = true)
         .withKeyCode()
         .keyDownEvent()