Cancel touch event if active backing DOM field is detected (JetBrains#2996)

Schahen · web-flow · commit 310bfb3ec52f · 2026-04-22T14:24:38.000+02:00
Following changes are introduced: - we treat stylus as touch event rather then mouse one - somer redundant code was removed - additional touchevent introduced that checks whether whether an active backing dom input is detected - in that case we preventDefault ## Testing `./gradlew testWeb` + manual ## Release Notes ### Fixes - Web - [CMP-10079](https://youtrack.jetbrains.com/issue/CMP-10079) [Web] Mobile. iOS 26.4 only. The virtual keyboard jumps after each tap
diff --git a/compose/mpp/demo/src/webMain/kotlin/androidx/compose/mpp/demo/components/DragAndDropExample.web.kt b/compose/mpp/demo/src/webMain/kotlin/androidx/compose/mpp/demo/components/DragAndDropExample.web.kt
@@ -58,7 +58,9 @@ import androidx.compose.animation.core.tween
 import androidx.compose.foundation.clickable
 import androidx.compose.material3.Button
 import androidx.compose.material3.Text
+import androidx.compose.material3.TextField
 import androidx.compose.ui.graphics.drawscope.Stroke
+import androidx.compose.ui.text.input.TextFieldValue
 
 @Composable
 @OptIn(ExperimentalComposeUiApi::class)
@@ -121,6 +123,29 @@ actual fun DragAndDropExample() {
             Text("Clickable and Draggable", color = Color.White)
         }
 
+        var textFieldValue by remember { mutableStateOf(TextFieldValue("Drag me")) }
+
+        Box(
+            modifier = Modifier
+                .align(Alignment.BottomCenter)
+                .padding(bottom = 16.dp)
+                .dragAndDropSource { _: Offset ->
+                    val dataTransfer = createDataTransfer()
+                    dataTransfer.setData("text/plain", textFieldValue.text)
+                    DragAndDropTransferData(dataTransfer)
+                }
+                .background(Color(0xFFE0E0E0))
+                .border(BorderStroke(1.dp, Color.DarkGray))
+                .padding(8.dp),
+            contentAlignment = Alignment.Center
+        ) {
+            TextField(
+                value = textFieldValue,
+                onValueChange = { textFieldValue = it },
+                label = { Text("Draggable text input") }
+            )
+        }
+
         val dragAndDropTarget = remember {
             object: DragAndDropTarget {
                 override fun onStarted(event: DragAndDropEvent) {
diff --git a/compose/ui/ui/src/webMain/kotlin/androidx/compose/ui/platform/BackingDomInput.kt b/compose/ui/ui/src/webMain/kotlin/androidx/compose/ui/platform/BackingDomInput.kt
@@ -22,7 +22,6 @@ import androidx.compose.ui.text.input.EditCommand
 import androidx.compose.ui.text.input.ImeOptions
 import androidx.compose.ui.text.input.TextFieldValue
 import kotlin.js.js
-import kotlinx.browser.document
 import kotlinx.browser.window
 import org.w3c.dom.HTMLElement
 
@@ -70,9 +69,7 @@ internal class BackingDomInput(
         // and https://youtrack.jetbrains.com/issue/CMP-7836/
         backingElement.focus()
         window.requestAnimationFrame {
-            if (document.activeElement != backingElement) {
-                backingElement.focus()
-            }
+            backingElement.focus()
         }
     }
 
diff --git a/compose/ui/ui/src/webMain/kotlin/androidx/compose/ui/platform/DomInputStrategy.kt b/compose/ui/ui/src/webMain/kotlin/androidx/compose/ui/platform/DomInputStrategy.kt
@@ -82,9 +82,6 @@ internal class DomInputStrategy(
     private val tabKeyCode = Key.Tab.keyCode.toInt()
 
     private fun initEvents() {
-        htmlInput.addEventListener("blur", { evt ->
-            // TODO: any actions here?
-        })
 
         htmlInput.addEventListener("keydown", { evt ->
             nativeInputEventsProcessor.registerEvent(evt as KeyboardEvent)
diff --git a/compose/ui/ui/src/webMain/kotlin/androidx/compose/ui/window/ComposeWindowInternal.web.kt b/compose/ui/ui/src/webMain/kotlin/androidx/compose/ui/window/ComposeWindowInternal.web.kt
@@ -84,7 +84,6 @@ import androidx.compose.ui.viewinterop.TrackInteropPlacementContainer
 import androidx.compose.ui.viewinterop.WebInteropContainer
 import androidx.lifecycle.Lifecycle
 import androidx.lifecycle.enableSavedStateHandles
-import kotlin.coroutines.coroutineContext
 import kotlin.js.ExperimentalWasmJsInterop
 import kotlin.js.JsArray
 import kotlin.js.js
@@ -99,9 +98,7 @@ import kotlinx.coroutines.channels.Channel
 import kotlinx.coroutines.channels.Channel.Factory.CONFLATED
 import kotlinx.coroutines.coroutineScope
 import kotlinx.coroutines.flow.Flow
-import kotlinx.coroutines.flow.flow
 import kotlinx.coroutines.flow.receiveAsFlow
-import kotlinx.coroutines.isActive
 import org.jetbrains.skiko.SkiaLayer
 import org.jetbrains.skiko.SkikoRenderDelegate
 import org.jetbrains.skiko.hostOs
@@ -115,6 +112,7 @@ import org.w3c.dom.HTMLTextAreaElement
 import org.w3c.dom.LOADING
 import org.w3c.dom.MediaQueryListEvent
 import org.w3c.dom.Node
+import org.w3c.dom.TouchEvent
 import org.w3c.dom.events.Event
 import org.w3c.dom.events.EventTarget
 import org.w3c.dom.events.FocusEvent
@@ -135,19 +133,6 @@ internal interface ComposeWindowState {
     fun dispose() {
         globalEvents.dispose()
     }
-
-    companion object {
-        fun createFromLambda(lambda: suspend () -> IntSize): ComposeWindowState {
-            return object : ComposeWindowState {
-                override val globalEvents = EventTargetListener(window)
-                override fun sizeFlow(): Flow<IntSize> = flow {
-                    while (coroutineContext.isActive) {
-                        emit(lambda())
-                    }
-                }
-            }
-        }
-    }
 }
 
 private sealed interface KeyboardModeState {
@@ -402,6 +387,17 @@ internal class ComposeWindow(
             addTypedEvent<PointerEvent>(name, passive = false) { onPointerEvent(it) }
         }
 
+        addTypedEvent<TouchEvent>("touchstart") { evt ->
+            // in most cases we don't care about touches since in Compose we do not process them at all
+            // there's one case however when we need to cancel them - it's when we are focussed in a DOM backing field
+            // see https://youtrack.jetbrains.com/issue/CMP-10079
+
+            val backingInput = (platformContext.textInputService as WebTextInputService).getBackingInput()
+            if (backingInput?.isFocused() == true) {
+                evt.preventDefault()
+            }
+        }
+
         addTypedEvent<WheelEvent>("wheel", passive = false) { event ->
             onWheelEvent(event)
         }
@@ -564,9 +560,43 @@ internal class ComposeWindow(
     private fun onPointerEvent(event: PointerEvent) {
         val eventType = event.getPointerEventType()
         var result: PointerEventResult? = null
-        val isTouchEvent = isTouchEvent(event)
 
-        if (isTouchEvent) {
+        if (isMouseEvent(event)) {
+            keyboardModeState = KeyboardModeState.Hardware
+
+            // validate event before sending it further - see
+            // https://youtrack.jetbrains.com/issue/CMP-8430/Sequence-of-Move-PointerInputEvents-cancel-out-press-PointerInputEvent-under-certain-conditions
+
+            var isValidEvent = true
+            when (eventType) {
+                PointerEventType.Press -> {
+                    actualActivePointerButtons = event.composeButtons
+                }
+                PointerEventType.Release -> {
+                    actualActivePointerButtons = null
+                }
+                PointerEventType.Move -> {
+                    isValidEvent = actualActivePointerButtons == null || actualActivePointerButtons == event.composeButtons
+                }
+            }
+
+            if (!isValidEvent) return
+
+            scene.sendPointerEvent(
+                eventType = eventType,
+                position = event.offset,
+                timeMillis = event.timeStamp.toInt().toLong(),
+                buttons = event.composeButtons,
+                keyboardModifiers = PointerKeyboardModifiers(
+                    isCtrlPressed = event.ctrlKey,
+                    isMetaPressed = event.metaKey,
+                    isAltPressed = event.altKey,
+                    isShiftPressed = event.shiftKey,
+                ),
+                nativeEvent = event,
+                button = event.composeButton,
+            )
+        } else {
             if (eventType == PointerEventType.Enter || eventType == PointerEventType.Exit) {
                 //Enter and Exit events have no sense for touches (Firefox and Safari send them)
                 return
@@ -652,48 +682,7 @@ internal class ComposeWindow(
 
             if (result != null && result.anyChangeConsumed && event.cancelable) {
                 event.preventDefault()
-
-                // Since we call preventDefault, the browser will not focus the canvas automatically,
-                // but it should be focused to receive key events.
-                if (!canvasFocused && !isTouchEvent && eventType == PointerEventType.Press) {
-                    canvas.focus()
-                }
-            }
-        } else {
-            keyboardModeState = KeyboardModeState.Hardware
-
-            // validate event before sending it further - see
-            // https://youtrack.jetbrains.com/issue/CMP-8430/Sequence-of-Move-PointerInputEvents-cancel-out-press-PointerInputEvent-under-certain-conditions
-
-            var isValidEvent = true
-            when (eventType) {
-                PointerEventType.Press -> {
-                    actualActivePointerButtons = event.composeButtons
-                }
-                PointerEventType.Release -> {
-                    actualActivePointerButtons = null
-                }
-                PointerEventType.Move -> {
-                    isValidEvent = actualActivePointerButtons == null || actualActivePointerButtons == event.composeButtons
-                }
             }
-
-            if (!isValidEvent) return
-
-            result = scene.sendPointerEvent(
-                eventType = eventType,
-                position = event.offset,
-                timeMillis = event.timeStamp.toInt().toLong(),
-                buttons = event.composeButtons,
-                keyboardModifiers = PointerKeyboardModifiers(
-                    isCtrlPressed = event.ctrlKey,
-                    isMetaPressed = event.metaKey,
-                    isAltPressed = event.altKey,
-                    isShiftPressed = event.shiftKey,
-                ),
-                nativeEvent = event,
-                button = event.composeButton,
-            )
         }
     }
 
@@ -826,7 +815,7 @@ private fun clipTargetElement(canvas: HTMLCanvasElement): HTMLTextAreaElement {
 
 // strings checks are faster on a JS side
 // language=js
-private fun isTouchEvent(event: PointerEvent): Boolean = js("event.pointerType === 'touch'")
+private fun isMouseEvent(event: PointerEvent): Boolean = js("event.pointerType === 'mouse'")
 
 // strings checks are faster on a JS side
 // language=js
@@ -858,4 +847,21 @@ private fun PointerEvent.getPointerEventType(): PointerEventType =
         PointerEventType.Enter.value -> PointerEventType.Enter
         PointerEventType.Exit.value -> PointerEventType.Exit
         else -> PointerEventType.Unknown
-    }
+    }
+
+private fun Element.isFocused(): Boolean {
+    val activeElement = when {
+        document.activeElement?.shadowRoot != null -> (document.activeElement?.shadowRoot as? ShadowRootExt)?.activeElement
+        else -> document.activeElement
+    }
+
+    if (activeElement == null) {
+        return false
+    }
+
+    return activeElement == this
+}
+
+private external interface ShadowRootExt {
+    val activeElement: Element?
+}
