Add isClearFocusOnMouseDownEnabled configuration in CfW (JetBrains#2781)

Introduces `isClearFocusOnMouseDownEnabled` to configure whether mouse
clicks outside focused elements clear focus.

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



## Testing
Added additional tests to ensure that setting
`isClearFocusOnMouseDownEnabled` affects the behaviour.

## Release Notes
### Features - Web
- Add `isClearFocusOnMouseDownEnabled` in `ComposeViewportConfiguration`
to configure the focus behaviour on mouse press

Author: eymar

compose/ui/ui/src/webMain/kotlin/androidx/compose/ui/window/ComposeViewportConfiguration.web.kt

@@ -16,7 +16,9 @@
 
 package androidx.compose.ui.window
 
+import androidx.compose.ui.ComposeUiFlags
 import androidx.compose.ui.ExperimentalComposeUiApi
+import androidx.compose.ui.isClearFocusOnMouseDownEnabled
 
 /**
  * Configuration of [ComposeViewport] behavior.
@@ -35,4 +37,11 @@ class ComposeViewportConfiguration internal constructor() {
      */
     @ExperimentalComposeUiApi
     var isA11YEnabled: Boolean = true
+
+    /**
+     * Controls whether a mouse clicks on an unfocused element clears focus.
+     * It's clearing focus on mouse down by default.
+     */
+    @ExperimentalComposeUiApi
+    var isClearFocusOnMouseDownEnabled: Boolean = ComposeUiFlags.isClearFocusOnMouseDownEnabled
 }

compose/ui/ui/src/webMain/kotlin/androidx/compose/ui/window/ComposeWindowInternal.web.kt

@@ -315,6 +315,9 @@ internal class ComposeWindow(
                         .startInputMethod(request)
                 }
             }
+
+            override val isClearFocusOnMouseDownEnabled: Boolean
+                get() = configuration.isClearFocusOnMouseDownEnabled
         }
 
     private val skiaLayer: SkiaLayer = SkiaLayer().apply {

compose/ui/ui/src/webTest/kotlin/androidx/compose/ui/input/TextFieldFocusTest.kt

@@ -16,27 +16,43 @@
 
 package androidx.compose.ui.input
 
+import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.text.BasicTextField
 import androidx.compose.foundation.text.input.TextFieldLineLimits
 import androidx.compose.foundation.text.input.rememberTextFieldState
 import androidx.compose.material.TextField
+import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.OnCanvasTests
+import androidx.compose.ui.background
 import androidx.compose.ui.events.keyEvent
 import androidx.compose.ui.focus.FocusRequester
 import androidx.compose.ui.focus.FocusState
 import androidx.compose.ui.focus.focusRequester
 import androidx.compose.ui.focus.onFocusChanged
+import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.input.key.Key
+import androidx.compose.ui.platform.testTag
+import androidx.compose.ui.unit.dp
 import kotlin.test.Test
 import kotlin.test.assertEquals
 import kotlin.test.assertFalse
 import kotlin.test.assertNotNull
 import kotlin.test.assertTrue
+import kotlinx.coroutines.Dispatchers
+import kotlinx.coroutines.delay
+import kotlinx.coroutines.withContext
 import kotlinx.coroutines.yield
+import org.w3c.dom.HTMLDivElement
 import org.w3c.dom.HTMLInputElement
 import org.w3c.dom.events.Event
 import org.w3c.dom.events.KeyboardEvent
+import org.w3c.dom.events.MouseEvent
+import org.w3c.dom.pointerevents.PointerEvent
+import org.w3c.dom.pointerevents.PointerEventInit
 
 class TextFieldFocusTest : OnCanvasTests {
 
@@ -132,4 +148,79 @@ class TextFieldFocusTest : OnCanvasTests {
         assertTrue((lastKeydownEventOnRoot as KeyboardEvent).shiftKey)
         assertTrue(lastKeydownEventOnRoot!!.defaultPrevented)
     }
+
+    private fun mouseDownPointerEvent(
+        x: Int, y: Int,
+    ): PointerEvent = PointerEvent(
+        "pointerdown",
+        PointerEventInit(
+            clientX = x, clientY = y,
+            button = 0, buttons = 1,
+            pointerType = "mouse"
+        )
+    )
+
+    @Test
+    fun mouseClickOutsideClearsFocusByDefault() = runApplicationTest {
+        val focusRequester = FocusRequester()
+        var focusState: FocusState? = null
+
+        createComposeWindow {
+            Column(Modifier.size(300.dp, 400.dp)) {
+                Box(Modifier.testTag("box").size(100.dp).background(Color.Gray))
+                BasicTextField(
+                    state = rememberTextFieldState(),
+                    modifier = Modifier
+                        .testTag("textField")
+                        .focusRequester(focusRequester)
+                        .onFocusChanged {
+                            focusState = it
+                        }
+                )
+                LaunchedEffect(Unit) {
+                    focusRequester.requestFocus()
+                }
+            }
+        }
+        assertTrue(focusState!!.isFocused, "Expected to be focused after requestFocus")
+
+        dispatchEvents(mouseDownPointerEvent(50, 50))
+        awaitIdle()
+        assertFalse(focusState!!.isFocused, "Expected to lose focus after clicking outside")
+    }
+
+    @Test
+    fun mouseClickOutsideDoesntClearsFocusWhenDisabled() = runApplicationTest {
+        val focusRequester = FocusRequester()
+        var focusState: FocusState? = null
+
+        createComposeWindow(
+            configure = {
+                isClearFocusOnMouseDownEnabled = false
+            }
+        ) {
+            Column(Modifier.size(300.dp, 400.dp)) {
+                Box(Modifier.testTag("box").size(100.dp).background(Color.Gray))
+                BasicTextField(
+                    state = rememberTextFieldState(),
+                    modifier = Modifier
+                        .testTag("textField")
+                        .focusRequester(focusRequester)
+                        .onFocusChanged {
+                            focusState = it
+                        }
+                )
+                LaunchedEffect(Unit) {
+                    focusRequester.requestFocus()
+                }
+            }
+        }
+        assertTrue(focusState!!.isFocused, "Expected to be focused after requestFocus")
+
+        dispatchEvents(mouseDownPointerEvent(50, 50))
+        awaitIdle()
+        assertTrue(focusState!!.isFocused, "Expected to keep focus despite clicking outside")
+    }
+
+
 }