Add a test for onPreviewKeyEvent

JetBrains/compose-multiplatform#2296
JetBrains · Apr 9, 2024 · 344b963 · 344b963
1 parent e640533
commit 344b963
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 3 deletions.
diff --git a/compose/ui/ui/src/jsWasmMain/kotlin/androidx/compose/ui/input/key/Key.jsWasm.kt b/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)

diff --git a/compose/ui/ui/src/webTest/kotlin/CanvasBasedWindowTests.kt b/compose/ui/ui/src/webTest/kotlin/CanvasBasedWindowTests.kt
@@ -21,21 +21,23 @@ 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.type
+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
@@ -131,6 +133,49 @@ class CanvasBasedWindowTests {
         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 {