Fixed the focus handling between compose and wasmJs

Author: DrUlysses

webview-compose/src/wasmJsMain/kotlin/io/github/kdroidfilter/webview/web/HtmlView.kt

@@ -47,31 +47,41 @@ fun HtmlView(
     val root: Node = document.body?.shadowRoot ?: document.body!!
     val density = LocalDensity.current.density
     val focusManager = LocalFocusManager.current
+    val htmlViewFocusRequester = remember { FocusRequester() }
 
     val componentInfo = remember { ComponentInfo<HTMLIFrameElement>() }
     val focusSwitcher = remember { FocusSwitcher(componentInfo, focusManager) }
     val eventsInitialized = remember { mutableStateOf(false) }
     val componentReady = remember { mutableStateOf(false) }
 
     Box(
-        modifier = modifier.onGloballyPositioned { coordinates ->
-            val location = coordinates.positionInWindow().round()
-            val size = coordinates.size
-            if (componentReady.value) {
-                val container = componentInfo.container as HTMLDivElement
-                container.style.width = "${size.width / density}px"
-                container.style.height = "${size.height / density}px"
-                container.style.left = "${location.x / density}px"
-                container.style.top = "${location.y / density}px"
+        modifier = modifier
+            .focusRequester(htmlViewFocusRequester)
+            .onFocusChanged {
+                if (it.isFocused) {
+                    element.value?.let(::requestFocus)
+                }
+            }
+            .focusTarget()
+            .onGloballyPositioned { coordinates ->
+                val location = coordinates.positionInWindow().round()
+                val size = coordinates.size
+                if (componentReady.value) {
+                    val container = componentInfo.container as HTMLDivElement
+                    container.style.width = "${size.width / density}px"
+                    container.style.height = "${size.height / density}px"
+                    container.style.left = "${location.x / density}px"
+                    container.style.top = "${location.y / density}px"
+                }
             }
-        }
     ) {
         focusSwitcher.Content()
     }
 
     DisposableEffect(Unit) {
         componentInfo.container = document.createElement("div") as HTMLDivElement
         componentInfo.component = document.createElement("iframe") as HTMLIFrameElement
+        componentInfo.component.tabIndex = 0
         componentReady.value = true
         val container = componentInfo.container as HTMLDivElement
 
@@ -99,9 +109,38 @@ fun HtmlView(
             if (!eventsInitialized.value) {
                 eventsInitialized.value = true
 
+                val syncFocusToIframe = {
+                    try {
+                        htmlViewFocusRequester.requestFocus()
+                        requestFocus(iframe)
+                        iframe.contentWindow?.focus()
+                    } catch (_: Throwable) {
+                    }
+                }
+
                 val loadCallback: (Event) -> Unit = {
                     state.loadingState = HtmlLoadingState.Finished()
 
+                    try {
+                        registerDomListener(iframe.contentWindow, "focus") {
+                            htmlViewFocusRequester.requestFocus()
+                        }
+
+                        registerDomListener(iframe.contentDocument, "focusin") {
+                            htmlViewFocusRequester.requestFocus()
+                        }
+
+                        registerDomListener(iframe.contentDocument, "pointerdown") {
+                            syncFocusToIframe()
+                        }
+
+                        registerDomListener(iframe.contentDocument, "mousedown") {
+                            syncFocusToIframe()
+                        }
+                    } catch (_: Throwable) {
+                        // Cross-origin iframe: cannot access contentDocument/contentWindow listeners
+                    }
+
                     when (val content = state.content) {
                         is HtmlContent.Url -> {
                             // Safe: use the URL requested, do not inspect iframe internals
@@ -137,14 +176,15 @@ fun HtmlView(
                     )
                 }
 
-                iframe.addEventListener(
-                    type = "load",
-                    callback = loadCallback
-                )
-                iframe.addEventListener(
-                    type = "error",
-                    callback = errorCallback
-                )
+                registerDomListener(iframe, "focus") {
+                    htmlViewFocusRequester.requestFocus()
+                }
+
+                registerDomListener(iframe, "pointerdown") {
+                    syncFocusToIframe()
+                }
+                iframe.addEventListener("load", loadCallback)
+                iframe.addEventListener("error", errorCallback)
 
                 scope.launch {
                     navigator.handleNavigationEvents(iframe)
@@ -344,9 +384,7 @@ fun HtmlViewUrl(
     HtmlView(
         state = state,
         modifier = modifier,
-        navigator = navigator,
-        onCreated = {},
-        onDispose = {},
+        navigator = navigator
     )
 }
 

webview-compose/src/wasmJsMain/kotlin/io/github/kdroidfilter/webview/web/JsInterop.kt

@@ -1,8 +1,8 @@
 @file:OptIn(ExperimentalWasmJsInterop::class)
-
 package io.github.kdroidfilter.webview.web
 
 import org.w3c.dom.Element
+import kotlin.js.JsAny
 
 /**
  * Evaluate JavaScript in the iframe context
@@ -46,3 +46,19 @@ fun addContentIdentifierJs(iframe: Element) {
 fun requestFocus(element: Element) {
     js("element.focus()")
 }
+
+/**
+ * Register a DOM listener without relying on Kotlin event casting.
+ */
+fun registerDomListener(target: JsAny?, type: String, callback: () -> Unit) {
+    js(
+        //language=javascript
+        """{
+            if (target && typeof target.addEventListener === 'function') {
+                target.addEventListener(type, function () {
+                    callback();
+                });
+            }
+        }"""
+    )
+}

webview-compose/src/wasmJsMain/kotlin/io/github/kdroidfilter/webview/web/WebView.wasmJs.kt

@@ -1,5 +1,4 @@
 @file:OptIn(ExperimentalWasmJsInterop::class)
-
 package io.github.kdroidfilter.webview.web
 
 import androidx.compose.runtime.*