[web] Refactor inner implementation of web input

compose/foundation/foundation/src/webMain/kotlin/androidx/compose/foundation/text/TextFieldKeyInput.web.kt

@@ -19,17 +19,16 @@ package androidx.compose.foundation.text
 import androidx.compose.ui.dom.domEventOrNull
 import androidx.compose.ui.input.key.KeyEvent
 import androidx.compose.ui.input.key.KeyEventType
-import androidx.compose.ui.input.key.isCtrlPressed
-import androidx.compose.ui.input.key.isMetaPressed
 import androidx.compose.ui.input.key.type
+import kotlin.js.js
 import org.w3c.dom.events.KeyboardEvent
 
 internal actual val KeyEvent.isTypedEvent: Boolean
-    get() = type == KeyEventType.KeyDown
-        && !isMetaPressed
-        && !isCtrlPressed
-        && domEventOrNull?.isPrintable() == true
+    get() = type == KeyEventType.KeyDown && domEventOrNull?.isTypedEvent == true
+
+private val KeyboardEvent.isTypedEvent: Boolean
+    get() = isTypedEvent(this)
+
+private fun isTypedEvent(evt: KeyboardEvent): Boolean =
+    js("!evt.metaKey && !evt.ctrlKey && evt.key.charAt(0) === evt.key")
 
-private fun KeyboardEvent.isPrintable(): Boolean {
-    return key.firstOrNull()?.toString() == key
-}

compose/ui/ui/src/webMain/kotlin/androidx/compose/ui/platform/BackingDomInput.kt

@@ -29,7 +29,7 @@ internal interface ComposeCommandCommunicator {
     fun sendEditCommand(commands: List<EditCommand>)
     fun sendEditCommand(command: EditCommand) = sendEditCommand(listOf(command))
 
-    fun sendKeyboardEvent(keyboardEvent: KeyEvent)
+    fun sendKeyboardEvent(keyboardEvent: KeyEvent): Boolean
 }
 
 private fun setBackingInputBox(container: HTMLElement, left: Float, top: Float, width: Float, height: Float) { js("""

compose/ui/ui/src/webMain/kotlin/androidx/compose/ui/platform/DomInputStrategy.kt

@@ -26,15 +26,16 @@ import kotlin.js.ExperimentalWasmJsInterop
 import kotlin.js.JsAny
 import kotlin.js.JsName
 import kotlin.js.definedExternally
-import kotlin.js.js
 import kotlin.js.unsafeCast
 import kotlinx.browser.document
 import kotlinx.browser.window
+import org.w3c.dom.EventInit
 import org.w3c.dom.HTMLElement
 import org.w3c.dom.events.CompositionEvent
 import org.w3c.dom.events.Event
 import org.w3c.dom.events.InputEvent
 import org.w3c.dom.events.KeyboardEvent
+import org.w3c.dom.events.UIEvent
 
 internal class DomInputStrategy(
     imeOptions: ImeOptions,
@@ -77,18 +78,19 @@ internal class DomInputStrategy(
         }
     }
 
-    private val tabKeyCode = Key.Tab.keyCode.toInt()
+    private fun KeyboardEvent.isComposeOnlyEvent(): Boolean {
+        return when (keyCode.toLong()) {
+            // In text inputs we want tab to be controlled entirely by Compose, same about navigation via errors
+            Key.Tab.keyCode, Key.DirectionLeft.keyCode, Key.DirectionUp.keyCode, Key.DirectionRight.keyCode, Key.DirectionDown.keyCode -> true
+            else -> false
+        }
+    }
 
     private fun initEvents() {
-        htmlInput.addEventListener("blur", { evt ->
-            // TODO: any actions here?
-        })
-
         htmlInput.addEventListener("keydown", { evt ->
             nativeInputEventsProcessor.registerEvent(evt as KeyboardEvent)
 
-            if (evt.keyCode == tabKeyCode) {
-                // Compose logic will handle the focus movement or insert Tabs if necessary
+            if (evt.isComposeOnlyEvent()) {
                 evt.preventDefault()
             }
 
@@ -113,7 +115,11 @@ internal class DomInputStrategy(
         })
 
         htmlInput.addEventListener("compositionstart", { evt ->
-            nativeInputEventsProcessor.registerEvent(evt as CompositionEvent)
+            nativeInputEventsProcessor.updateImeStatus(evt as CompositionEvent)
+        })
+
+        htmlInput.addEventListener("compositionupdate", { evt ->
+            nativeInputEventsProcessor.updateImeStatus(evt as CompositionEvent)
         })
 
         htmlInput.addEventListener("compositionend", { evt ->
@@ -159,16 +165,16 @@ private external interface DocumentOrShadowRootLike : JsAny {
 }
 
 @JsName("InputEvent")
-internal external class InputEventExt : JsAny {
+internal external class InputEventExt : UIEvent {
+    val data: String?
     val inputType: String
     var textRangeStart: Int
     var textRangeEnd: Int
-}
 
-internal val InputEvent.textRangeSize: Int
-    get() = this.asInputEventExt().let { it.textRangeEnd - it.textRangeStart }
+    constructor(type: String, eventInitDict: EventInit = definedExternally)
+}
 
-internal expect inline fun InputEvent.asInputEventExt(): InputEventExt
+internal inline fun UIEvent.asInputEventExt(): InputEventExt =  unsafeCast<InputEventExt>()
 
 private fun ImeOptions.createDomElement(): HTMLElement {
     val htmlElement = document.createElement(
@@ -250,13 +256,11 @@ private fun ImeOptions.createDomElement(): HTMLElement {
     return htmlElement
 }
 
+// HTMLTextAreaElement and HTMLInputElement do not intersect in Kotlin definition, so we introduce helper interface
 private external interface HTMLElementWithValue {
     var value: String
     val selectionStart: Int
     val selectionEnd: Int
     val selectionDirection: String?
     fun setSelectionRange(start: Int, end: Int, direction: String = definedExternally)
-}
-
-internal fun isTypedEvent(evt: KeyboardEvent): Boolean =
-    js("!evt.metaKey && !evt.ctrlKey && evt.key.charAt(0) === evt.key")
+}