web: add `inputmode` global attribute (#1461)

https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode

closes https://github.com/JetBrains/compose-jb/issues/1338

Co-authored-by: Oleksandr Karpovich <oleksandr.karpovich@jetbrains.com>

web/core/src/jsMain/kotlin/org/jetbrains/compose/web/attributes/AttrsBuilder.kt

@@ -61,6 +61,16 @@ open class AttrsBuilder<TElement : Element> : EventsListenerBuilder() {
     fun tabIndex(value: Int) = attr(TAB_INDEX, value.toString())
     fun spellCheck(value: Boolean) = attr(SPELLCHECK, value.toString())
 
+    /**
+     * see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode
+     */
+    fun inputMode(value: String) = attr("inputmode", value)
+
+    /**
+     * see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode
+     */
+    fun inputMode(value: InputMode) = attr("inputmode", value.str)
+
     /**
      * [ref] can be used to retrieve a reference to a html element.
      * The lambda that `ref` takes in is not Composable. It will be called only once when an element added into a composition.

web/core/src/jsMain/kotlin/org/jetbrains/compose/web/attributes/PredefinedAttrValues.kt

@@ -190,6 +190,21 @@ enum class Scope(val str: String) {
     Colgroup("colgroup")
 }
 
+/**
+ * see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode
+ */
+enum class InputMode(val str: String) {
+    None("none"),
+    Text("text"), // default
+    Decimal("decimal"),
+    Numeric("numeric"),
+    Tel("tel"),
+    Search("search"),
+    Email("email"),
+    Url("url"),
+    ;
+}
+
 
 /**
  * https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete

web/core/src/jsTest/kotlin/elements/AttributesTests.kt

@@ -1,25 +1,21 @@
 package org.jetbrains.compose.web.core.tests
 
+import androidx.compose.runtime.Composable
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.setValue
 import kotlinx.browser.document
 import kotlinx.dom.clear
-import org.jetbrains.compose.web.attributes.AttrsBuilder
-import org.jetbrains.compose.web.attributes.disabled
-import org.jetbrains.compose.web.attributes.forId
-import org.jetbrains.compose.web.attributes.value
+import org.jetbrains.compose.web.attributes.*
 import org.jetbrains.compose.web.css.*
-import org.jetbrains.compose.web.dom.Button
-import org.jetbrains.compose.web.dom.Div
-import org.jetbrains.compose.web.dom.Label
-import org.jetbrains.compose.web.dom.Text
+import org.jetbrains.compose.web.dom.*
 import org.w3c.dom.HTMLButtonElement
 import org.w3c.dom.HTMLDivElement
 import org.w3c.dom.HTMLElement
 import kotlin.test.Test
 import kotlin.test.assertEquals
 import org.jetbrains.compose.web.testutils.*
+import org.w3c.dom.HTMLInputElement
 
 class AttributesTests {
 
@@ -404,4 +400,36 @@ class AttributesTests {
             actual = currentChild().outerHTML
         )
     }
+
+    @Test
+    fun inputMode() = runTest {
+        @Composable
+        fun TestInput(mode: InputMode) {
+            Input(type = InputType.Text) {
+                inputMode(mode)
+            }
+        }
+
+        val mode = mutableStateOf<InputMode?>(null)
+        composition {
+            if (mode.value != null) TestInput(mode.value!!)
+        }
+
+        suspend fun check(setMode: InputMode, value: String) {
+            mode.value = setMode
+            waitForRecompositionComplete()
+            assertEquals(
+                value,
+                (root.firstChild as HTMLInputElement).getAttribute("inputmode")
+            )
+        }
+
+        check(InputMode.None, "none")
+        check(InputMode.Text, "text")
+        check(InputMode.Decimal, "decimal")
+        check(InputMode.Numeric, "numeric")
+        check(InputMode.Tel, "tel")
+        check(InputMode.Search, "search")
+        check(InputMode.Url, "url")
+    }
 }