[web] Fix Backspace behaviour on mobile iOS (#2330) (#2338)

## Release Notes
#2330

Author: sekater

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

@@ -50,29 +50,31 @@ internal class DomInputStrategy(
         })
 
         htmlInput.addEventListener("keydown", { evt ->
-            nativeInputEventsProcessor.addKeyEvent(evt as KeyboardEvent)
+            nativeInputEventsProcessor.registerEvent(evt as KeyboardEvent)
         })
 
         htmlInput.addEventListener("keyup", { evt ->
-            nativeInputEventsProcessor.addKeyEvent(evt as KeyboardEvent)
+            nativeInputEventsProcessor.registerEvent(evt as KeyboardEvent)
         })
 
         htmlInput.addEventListener("beforeinput", { evt ->
             if (evt is InputEvent) {
                 htmlInput as HTMLElementWithValue
                 val deleteContentBackwardSize = htmlInput.selectionEnd - htmlInput.selectionStart
-                nativeInputEventsProcessor.addInputEvent(
-                    event = evt, deleteContentBackwardSize = deleteContentBackwardSize
-                )
+
+                if (deleteContentBackwardSize > 0) {
+                    evt.deleteContentBackwardSize = deleteContentBackwardSize
+                }
+                nativeInputEventsProcessor.registerEvent(evt)
             }
         })
 
         htmlInput.addEventListener("compositionstart", { evt ->
-            nativeInputEventsProcessor.addCompositionEvent(evt as CompositionEvent)
+            nativeInputEventsProcessor.registerEvent(evt as CompositionEvent)
         })
 
         htmlInput.addEventListener("compositionend", { evt ->
-            nativeInputEventsProcessor.addCompositionEvent(evt as CompositionEvent)
+            nativeInputEventsProcessor.registerEvent(evt as CompositionEvent)
         })
     }
 }

compose/ui/ui/src/webCommonW3C/kotlin/androidx/compose/ui/platform/NativeInputEventsProcessor.kt

@@ -21,12 +21,11 @@ import androidx.compose.ui.input.key.toComposeEvent
 import androidx.compose.ui.text.input.BackspaceCommand
 import androidx.compose.ui.text.input.CommitTextCommand
 import androidx.compose.ui.text.input.DeleteSurroundingTextCommand
-import androidx.compose.ui.text.input.EditCommand
 import androidx.compose.ui.text.input.SetComposingTextCommand
 import androidx.compose.ui.text.input.TextFieldValue
 import org.w3c.dom.events.CompositionEvent
-import org.w3c.dom.events.Event
 import org.w3c.dom.events.KeyboardEvent
+import org.w3c.dom.events.UIEvent
 
 /**
  * Processes native input events and handles their translation to commands
@@ -41,7 +40,7 @@ internal abstract class NativeInputEventsProcessor(
     private val composeSender: ComposeCommandCommunicator
 ) {
 
-    private val collectedEvents = mutableListOf<Event>()
+    private val collectedEvents = mutableListOf<UIEvent>()
     private var isCheckpointScheduled = false
     private var lastCompositionEndTimestamp = 0.0 // Double because of k/wasm where Number.toLong() leads to a compilation error
 
@@ -74,113 +73,117 @@ internal abstract class NativeInputEventsProcessor(
                 || it.type == "beforeinput" && (it as InputEvent).isComposing
         }
 
-        var keydownEvent: KeyboardEvent? = null
-        var compositionEndEvt: CompositionEvent? = null
+        var lastProcessedEventIsBackspace: Boolean = false
 
         collectedEvents.forEach { evt ->
-            val eventName = evt.type
+            val timestamp = evt.timeStamp.toDouble()
 
-            when (eventName) {
+            when (evt.type) {
                 "keydown" -> {
-                    keydownEvent = evt as KeyboardEvent
-                    val isTypedEvent = isTypedEvent(keydownEvent)
-                    val isFromLastComposition =
-                        keydownEvent.timeStamp.toDouble() < lastCompositionEndTimestamp
-                    if (!isInIMEComposition && !isTypedEvent && !isFromLastComposition) {
-                        composeSender.sendKeyboardEvent(keydownEvent.toComposeEvent())
+                    if (isInIMEComposition) return@forEach
+
+                    evt as KeyboardEvent
+                    if (isTypedEvent(evt)) return@forEach
+
+                    val isFromLastComposition = timestamp < lastCompositionEndTimestamp
+
+                    // see https://youtrack.jetbrains.com/issue/CMP-8745/Web-Mobile.-iOS.-Composite-input.-Characters-arent-deleted
+                    // on mobile iOS we cannot rely on the timestamp of the "keydown" event, it's always zero
+                    // it might seem strange that we are ignoring the isFromLastComposition safeguard
+                    // which was historically introduced exactly to resolve issues in Safari -
+                    // but isFromLastComposition is needed so that we won't type a number digit if it was pressed during composition mode
+                    // this is something that is not supposed to happen on mobile devices
+                    val shouldBeProcessed = timestamp == 0.0 || !isFromLastComposition
+
+                    if (shouldBeProcessed) {
+                        lastProcessedEventIsBackspace = evt.key == "Backspace"
+                        composeSender.sendKeyboardEvent(evt.toComposeEvent())
                     }
                 }
 
                 "compositionend" -> {
-                    compositionEndEvt = evt as CompositionEvent
-                    lastCompositionEndTimestamp = evt.timeStamp.toDouble()
-                    composeSender.sendEditCommand(CommitTextCommand(compositionEndEvt.data, 1))
+                    lastCompositionEndTimestamp = timestamp
+                    composeSender.sendEditCommand(CommitTextCommand((evt as CompositionEvent).data, 1))
                 }
 
                 "beforeinput" -> {
-                    evt as InputEvent
-                    val inputType = evt.inputType
-                    val data = evt.data
-
-                    val editCommands = mutableListOf<EditCommand>()
-                    when (inputType) {
-                        "insertFromComposition", "deleteCompositionText" -> {
-                            // We see these events in Safari just before 'compositionEnd' event.
-                            // We do nothing here, because Safari also sends 'insertCompositionText' which we handle,
-                            // and the behavior is as expected atm. We also handle 'compositionEnd'.
-                        }
-
-                        "deleteContentBackward" -> {
-                            // If it's "Backspace", then it's handled earlier in "keydown" above, so skipping it here
-                            if (keydownEvent?.key != "Backspace") {
-                                if (!currentTextFieldValue.selection.collapsed) {
-                                    // Likely it's on mobile, where the Backspace has Unidentified key value.
-                                    // When Compose TextField shows text selection,
-                                    // a good UX for deleteContentBackward would be to emulate Backspace
-                                    editCommands.add(BackspaceCommand())
-                                } else {
-                                    // This happens when an autocorrection is applied on mobile:
-                                    // The system first tells us to delete the old text,
-                                    // and then it would send the "insertText" event.
-                                    val deleteSize = evt.deleteContentBackwardSize
-                                    if (deleteSize > 0) {
-                                        editCommands.add(DeleteSurroundingTextCommand(deleteSize, 0))
-                                    }
-                                }
-                            }
-                        }
-
-                        "insertReplacementText" -> if (data != null) {
-                            val deleteSize = evt.deleteContentBackwardSize
-                            if (deleteSize > 0) {
-                                editCommands.add(DeleteSurroundingTextCommand(deleteSize, 0))
-                            }
-                            editCommands.add(CommitTextCommand(data, 1))
-                        }
-
-                        "insertText" -> if (data != null) {
-                            val deleteSize = evt.deleteContentBackwardSize
-                            if (deleteSize > 0 && currentTextFieldValue.selection.collapsed) {
-                                editCommands.add(DeleteSurroundingTextCommand(deleteSize, 0))
-                            }
-
-                            editCommands.add(CommitTextCommand(data, 1))
-                        }
-
-                        "insertCompositionText" -> if (data != null) {
-                            val deleteSize = evt.deleteContentBackwardSize
-                            if (deleteSize > 0) {
-                                editCommands.add(DeleteSurroundingTextCommand(deleteSize, 0))
-                            }
-                            editCommands.add(SetComposingTextCommand(data, 1))
-                        }
-                    }
-                    composeSender.sendEditCommand(editCommands)
+                    (evt as InputEvent).process(
+                        lastProcessedEventIsBackspace = lastProcessedEventIsBackspace,
+                        currentTextFieldValue = currentTextFieldValue
+                    )
                 }
             }
         }
 
         collectedEvents.clear()
     }
 
-    internal fun addInputEvent(event: InputEvent, deleteContentBackwardSize: Int = 0) {
-        if (deleteContentBackwardSize > 0) {
-            event.deleteContentBackwardSize = deleteContentBackwardSize
+    private fun InputEvent.process(lastProcessedEventIsBackspace: Boolean, currentTextFieldValue: TextFieldValue) {
+        val editCommands = when (inputType) {
+            "deleteContentBackward" -> buildList {
+                // this means "deleteContentBackward" happened because of an earlier "keydown" event, so skipping it here
+                if (lastProcessedEventIsBackspace) return@buildList
+
+                if (!currentTextFieldValue.selection.collapsed) {
+                    // Likely it's on mobile, where the Backspace has Unidentified key value.
+                    // When Compose TextField shows text selection,
+                    // a good UX for deleteContentBackward would be to emulate Backspace
+                    add(BackspaceCommand())
+                } else {
+                    // This happens when an autocorrection is applied on mobile:
+                    // The system first tells us to delete the old text,
+                    // and then it would send the "insertText" event.
+                    val deleteSize = deleteContentBackwardSize
+                    if (deleteSize > 0) {
+                        add(DeleteSurroundingTextCommand(deleteSize, 0))
+                    }
+                }
+            }
+
+            "insertReplacementText" -> buildList {
+                if (data == null) return@buildList
+                val deleteSize = deleteContentBackwardSize
+                if (deleteSize > 0) {
+                    add(DeleteSurroundingTextCommand(deleteSize, 0))
+                }
+
+                add(CommitTextCommand(data, 1))
+            }
+
+            "insertText" -> buildList {
+                if (data == null) return@buildList
+                val deleteSize = deleteContentBackwardSize
+                if (deleteSize > 0 && currentTextFieldValue.selection.collapsed) {
+                    add(DeleteSurroundingTextCommand(deleteSize, 0))
+                }
+
+                add(CommitTextCommand(data, 1))
+            }
+
+            "insertCompositionText" -> buildList {
+                if (data == null) return@buildList
+                val deleteSize = deleteContentBackwardSize
+                if (deleteSize > 0) {
+                    add(DeleteSurroundingTextCommand(deleteSize, 0))
+                }
+                add(SetComposingTextCommand(data, 1))
+            }
+
+            // "insertFromComposition", "deleteCompositionText" are triggered in Safari just before the 'compositionEnd' event.
+            // They're ignored because Safari also sends 'insertCompositionText' which we handle (alongside 'compositionEnd')
+            else -> emptyList()
         }
-        collectedEvents.add(event)
-        internalScheduleCheckpoint()
-    }
 
-    internal fun addKeyEvent(event: KeyboardEvent) {
-        collectedEvents.add(event)
-        internalScheduleCheckpoint()
+        if (editCommands.isNotEmpty()) {
+            composeSender.sendEditCommand(editCommands)
+        }
     }
 
-    internal fun addCompositionEvent(event: CompositionEvent) {
+    internal fun registerEvent(event: UIEvent) {
         collectedEvents.add(event)
         internalScheduleCheckpoint()
     }
 
     @TestOnly
-    internal fun getCollectedEvents(): List<Event> = collectedEvents
+    internal fun getCollectedEvents() = collectedEvents
 }