Fix web clipboard events in SelectionContainer (#2700) (#2701)

Cherry-pick from
#2700

Fixes https://youtrack.jetbrains.com/issue/CMP-9508

## Testing
This should be tested by QA

## Release Notes
### Fixes - Web
- Fix `Ctrl/Cmd + C` (copy) event handling for the selected text wrapped
in SelectionContainer

Author: siarb

compose/ui/ui/src/webCommonW3C/kotlin/androidx/compose/ui/internal/W3CDomExtensions.kt

@@ -0,0 +1,24 @@
+/*
+ * Copyright 2026 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.ui.internal
+
+import kotlin.js.js
+import org.w3c.dom.HTMLElement
+
+@Suppress("LocalVariableName")
+internal fun focusExt(element: HTMLElement, _preventScroll: Boolean): Unit =
+    js("element.focus({ preventScroll: _preventScroll })")

compose/ui/ui/src/webCommonW3C/kotlin/androidx/compose/ui/window/ComposeWindow.w3c.kt

@@ -30,8 +30,14 @@ import androidx.compose.ui.geometry.Rect
 import androidx.compose.ui.graphics.asComposeCanvas
 import androidx.compose.ui.input.InputMode
 import androidx.compose.ui.input.InputModeManager
+import androidx.compose.ui.input.key.Key
 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.key
 import androidx.compose.ui.input.key.toComposeEvent
+import androidx.compose.ui.input.key.type
 import androidx.compose.ui.input.pointer.BrowserCursor
 import androidx.compose.ui.input.pointer.PointerButtons
 import androidx.compose.ui.input.pointer.PointerEventType
@@ -41,6 +47,7 @@ import androidx.compose.ui.input.pointer.PointerKeyboardModifiers
 import androidx.compose.ui.input.pointer.PointerType
 import androidx.compose.ui.input.pointer.composeButton
 import androidx.compose.ui.input.pointer.composeButtons
+import androidx.compose.ui.internal.focusExt
 import androidx.compose.ui.navigationevent.BackNavigationEventInput
 import androidx.compose.ui.platform.DefaultArchitectureComponentsOwner
 import androidx.compose.ui.platform.DefaultInputModeManager
@@ -90,13 +97,16 @@ import kotlinx.coroutines.launch
 import org.jetbrains.skia.Canvas
 import org.jetbrains.skiko.SkiaLayer
 import org.jetbrains.skiko.SkikoRenderDelegate
+import org.jetbrains.skiko.hostOs
 import org.w3c.dom.AddEventListenerOptions
 import org.w3c.dom.Element
 import org.w3c.dom.HTMLCanvasElement
 import org.w3c.dom.HTMLDivElement
 import org.w3c.dom.HTMLElement
 import org.w3c.dom.HTMLStyleElement
 import org.w3c.dom.HTMLTitleElement
+import org.w3c.dom.HTMLTextAreaElement
+import org.w3c.dom.LOADING
 import org.w3c.dom.MediaQueryListEvent
 import org.w3c.dom.Node
 import org.w3c.dom.OPEN
@@ -186,6 +196,7 @@ internal class DefaultWindowState(private val viewportContainer: Element) : Comp
 internal class ComposeWindow(
     private val canvas: HTMLCanvasElement,
     private val rootNode: Node,
+    private val layerRoot: HTMLElement,
     private val interopContainerElement: HTMLDivElement,
     private val a11yContainerElement: HTMLDivElement?,
     private val configuration: ComposeViewportConfiguration,
@@ -214,6 +225,8 @@ internal class ComposeWindow(
     // Used in WebTextInputService. Also see https://youtrack.jetbrains.com/issue/CMP-8611
     private var activeTouchOffset: Offset? = null
 
+    private val clipTarget = clipTargetElement(canvas)
+
     private val platformContext: PlatformContext = object : PlatformContext by PlatformContext.Empty() {
         override val windowInfo get() = _windowInfo
         override val architectureComponentsOwner get() = archComponentsOwner
@@ -331,7 +344,27 @@ internal class ComposeWindow(
         val keyEvent = keyboardEvent.toComposeEvent()
         val processed = scene.sendKeyEvent(keyEvent) ||
             navigationEventInput.onKeyEvent(keyEvent)
-        if (processed) keyboardEvent.preventDefault()
+
+        if (processed) {
+            keyboardEvent.preventDefault()
+        } else if (keyEvent.type == KeyEventType.KeyDown){
+            processClipKeyDown(keyEvent)
+        }
+    }
+
+    private val isMacOS = hostOs.isMacOS
+
+    private fun processClipKeyDown(keyEvent: KeyEvent) {
+        val mod = if (isMacOS) keyEvent.isMetaPressed else keyEvent.isCtrlPressed
+        if (!mod) return
+        if (keyEvent.key == Key.C || keyEvent.key == Key.V || keyEvent.key == Key.X) {
+            // A browser is about to dispatch a Clipboard Event.
+            // Some browsers do not dispatch Clipboard events to <canvas> despite it having focus,
+            // so let it dispatch the event to clipTarget (text area).
+            // By focusing on it, we let a browser dispatch the event to it.
+            layerRoot.appendChild(clipTarget)
+            focusExt(clipTarget, true)
+        }
     }
 
     private fun initEvents(canvas: HTMLCanvasElement) {
@@ -421,13 +454,15 @@ internal class ComposeWindow(
 
         val interopContainer = WebInteropContainer(InteropViewGroup(interopContainerElement))
 
+        val clipEventsTargetProvider: () -> HTMLElement = {
+            (platformContext.textInputService as WebTextInputService).getBackingInput()
+                ?: clipTarget
+        }
         scene.setContent {
             CompositionLocalProvider(
                 LocalSystemTheme provides systemThemeObserver.currentSystemTheme.value,
                 LocalInteropContainer provides interopContainer,
-                LocalActiveClipEventsTarget provides {
-                    (platformContext.textInputService as WebTextInputService).getBackingInput() ?: canvas
-                },
+                LocalActiveClipEventsTarget provides clipEventsTargetProvider,
                 content = {
                     interopContainer.TrackInteropPlacementContainer {
                         content()
@@ -681,6 +716,7 @@ fun CanvasBasedWindow(
         canvas = canvas,
         rootNode = canvas.getRootNode(),
         // a detached container
+        layerRoot = document.createElement("div") as HTMLDivElement,
         interopContainerElement = document.createElement("div") as HTMLDivElement,
         a11yContainerElement = document.createElement("div") as HTMLDivElement,
         content = content,
@@ -781,10 +817,43 @@ fun ComposeViewport(
     ComposeWindow(
         canvas = canvas,
         rootNode = shadowRoot,
+        layerRoot = layerRoot,
         interopContainerElement = interopContainerElement,
         a11yContainerElement = a11yContainerElement,
         content = content,
         configuration = configuration,
         state = DefaultWindowState(viewportContainer)
     )
+}
+
+/**
+ * The purpose of the clipTarget element is to briefly steal the focus to let the browser dispatch
+ * ClipboardEvent to it. Then it returns the focus to the canvas.
+ */
+private fun clipTargetElement(canvas: HTMLCanvasElement): HTMLTextAreaElement {
+    val clipTarget = (document.createElement("textarea") as HTMLTextAreaElement).apply {
+        tabIndex = -1
+        setAttribute("aria-hidden", "true")
+        style.position = "fixed"
+        style.left = "-1000px"
+        style.top = "0"
+        style.opacity = "0"
+        style.width = "1px"
+        style.height = "1px"
+    }
+
+    val clipEventListener: (Event) -> Unit = { _ ->
+        window.requestAnimationFrame {
+            focusExt(canvas, true)
+            clipTarget.remove()
+        }
+    }
+
+    // Here just return the focus to canvas.
+    // For the actual event handling see rememberClipboardEventsHandler implementations.
+    clipTarget.addEventListener("copy", clipEventListener)
+    clipTarget.addEventListener("cut", clipEventListener)
+    clipTarget.addEventListener("paste", clipEventListener)
+
+    return clipTarget
 }

compose/ui/ui/src/webTest/kotlin/androidx/compose/ui/window/ComposeWindowLifecycleTest.kt

@@ -30,6 +30,7 @@ import kotlinx.browser.window
 import kotlinx.coroutines.channels.Channel
 import kotlinx.coroutines.test.runTest
 import org.w3c.dom.HTMLDivElement
+import org.w3c.dom.HTMLElement
 
 class ComposeWindowLifecycleTest : OnCanvasTests {
     @Test
@@ -41,6 +42,7 @@ class ComposeWindowLifecycleTest : OnCanvasTests {
         val composeWindow = ComposeWindow(
             canvas = canvas,
             rootNode = getShadowRoot(),
+            layerRoot = document.createElement("div") as HTMLElement,
             interopContainerElement = document.createElement("div") as HTMLDivElement,
             a11yContainerElement = null,
             content = {},