web: update select event (only for input and textarea)

JetBrains · Jul 14, 2021 · 969c97f · 969c97f
1 parent 1e17a5b
commit 969c97f
Show file tree

Hide file tree

Showing 6 changed files with 74 additions and 6 deletions.
diff --git a/web/core/src/jsMain/kotlin/org/jetbrains/compose/web/attributes/EventsListenerBuilder.kt b/web/core/src/jsMain/kotlin/org/jetbrains/compose/web/attributes/EventsListenerBuilder.kt
@@ -196,10 +196,6 @@ open class EventsListenerBuilder {
         listeners.add(WrappedEventListener(SCROLL, options, listener))
     }
 
-    fun onSelect(options: Options = Options.DEFAULT, listener: (WrappedEvent) -> Unit) {
-        listeners.add(WrappedEventListener(SELECT, options, listener))
-    }
-
     fun onTouchCancel(options: Options = Options.DEFAULT, listener: (WrappedTouchEvent) -> Unit) {
         listeners.add(TouchEventListener(TOUCHCANCEL, options, listener))
     }

diff --git a/web/core/src/jsMain/kotlin/org/jetbrains/compose/web/attributes/InputAttrsBuilder.kt b/web/core/src/jsMain/kotlin/org/jetbrains/compose/web/attributes/InputAttrsBuilder.kt
@@ -10,6 +10,7 @@ import org.jetbrains.compose.web.attributes.AttrsBuilder
 import org.jetbrains.compose.web.attributes.InputType
 import org.jetbrains.compose.web.attributes.Options
 import org.jetbrains.compose.web.events.SyntheticChangeEvent
+import org.jetbrains.compose.web.events.SyntheticSelectEvent
 import org.w3c.dom.DataTransfer
 import org.w3c.dom.HTMLElement
 import org.w3c.dom.HTMLInputElement
@@ -67,4 +68,13 @@ class InputAttrsBuilder<T>(
             listener(SyntheticInputEvent(value, it.nativeEvent))
         }
     }
+
+    fun onSelect(
+        options: Options = Options.DEFAULT,
+        listener: (SyntheticSelectEvent<HTMLInputElement>) -> Unit
+    ) {
+        addEventListener(SELECT, options) {
+            listener(SyntheticSelectEvent(it.nativeEvent))
+        }
+    }
 }
diff --git a/web/core/src/jsMain/kotlin/org/jetbrains/compose/web/attributes/TextAreaAttrsBuilder.kt b/web/core/src/jsMain/kotlin/org/jetbrains/compose/web/attributes/TextAreaAttrsBuilder.kt
@@ -8,6 +8,7 @@ package androidx.compose.web.attributes
 import org.jetbrains.compose.web.attributes.AttrsBuilder
 import org.jetbrains.compose.web.attributes.Options
 import org.jetbrains.compose.web.events.SyntheticChangeEvent
+import org.jetbrains.compose.web.events.SyntheticSelectEvent
 import org.w3c.dom.HTMLTextAreaElement
 
 class TextAreaAttrsBuilder : AttrsBuilder<HTMLTextAreaElement>() {
@@ -41,4 +42,13 @@ class TextAreaAttrsBuilder : AttrsBuilder<HTMLTextAreaElement>() {
             listener(SyntheticInputEvent(text, it.nativeEvent))
         }
     }
+
+    fun onSelect(
+        options: Options = Options.DEFAULT,
+        listener: (SyntheticSelectEvent<HTMLTextAreaElement>) -> Unit
+    ) {
+        addEventListener(SELECT, options) {
+            listener(SyntheticSelectEvent(it.nativeEvent))
+        }
+    }
 }
diff --git a/web/core/src/jsMain/kotlin/org/jetbrains/compose/web/events/SyntheticSelectEvent.kt b/web/core/src/jsMain/kotlin/org/jetbrains/compose/web/events/SyntheticSelectEvent.kt
@@ -0,0 +1,20 @@
+package org.jetbrains.compose.web.events
+
+import androidx.compose.web.events.SyntheticEvent
+import org.w3c.dom.events.Event
+import org.w3c.dom.events.EventTarget
+
+class SyntheticSelectEvent<Element : EventTarget>(
+    nativeEvent: Event,
+) : SyntheticEvent<Element>(nativeEvent) {
+
+    val selectionStart: Int = nativeEvent.target.asDynamic().selectionStart.unsafeCast<Int>()
+    val selectionEnd: Int = nativeEvent.target.asDynamic().selectionEnd.unsafeCast<Int>()
+
+
+    fun selection(): String {
+        return nativeEvent.target.asDynamic().value.unsafeCast<String?>()?.substring(
+            selectionStart, selectionEnd
+        ) ?: ""
+    }
+}
diff --git a/web/integration-core/src/jsMain/kotlin/androidx/compose/web/sample/tests/EventsTests.kt b/web/integration-core/src/jsMain/kotlin/androidx/compose/web/sample/tests/EventsTests.kt
@@ -97,7 +97,23 @@ class EventsTests {
             value("This is a text to be selected")
             id("selectableText")
             onSelect {
-                state = "Text Selected"
+                state = it.selection()
+            }
+        })
+    }
+
+    val selectEventInTextAreaUpdatesText by testCase {
+        var state by remember { mutableStateOf("None") }
+        var selectedIndexes by remember { mutableStateOf("None") }
+
+        P(attrs = { style { height(50.px) } }) { TestText(state) }
+        P(attrs = { style { height(50.px) } }) { TestText(selectedIndexes, id = "txt2") }
+
+        TextArea(value = "This is a text to be selected", attrs = {
+            id("textArea")
+            onSelect {
+                state = it.selection()
+                selectedIndexes = "${it.selectionStart},${it.selectionEnd}"
             }
         })
     }

diff --git a/...gration-core/src/jvmTest/kotlin/org/jetbrains/compose/web/tests/integration/EventTests.kt b/...gration-core/src/jvmTest/kotlin/org/jetbrains/compose/web/tests/integration/EventTests.kt
@@ -118,7 +118,23 @@ class EventTests : BaseIntegrationTests() {
         val selectAll = Keys.chord(COMMAND_CROSS_PLATFORM, "a")
         selectableText.sendKeys(selectAll)
 
-        driver.waitTextToBe(value = "Text Selected")
+        driver.waitTextToBe(value = "This is a text to be selected")
+    }
+
+    @ResolveDrivers
+    fun `select event in TextArea update the txt`(driver: WebDriver) {
+        driver.openTestPage("selectEventInTextAreaUpdatesText")
+        driver.waitTextToBe(value = "None")
+        driver.waitTextToBe(value = "None", textId = "txt2")
+
+        val selectableText = driver.findElement(By.id("textArea"))
+
+        val selectAll = Keys.chord(COMMAND_CROSS_PLATFORM, "a")
+        selectableText.sendKeys(selectAll)
+
+        val expectedText = "This is a text to be selected"
+        driver.waitTextToBe(value = expectedText)
+        driver.waitTextToBe(value = "0,${expectedText.length}", textId = "txt2")
     }
 
     @ResolveDrivers