diff --git a/web/core/src/jsMain/kotlin/org/jetbrains/compose/web/attributes/AttrsBuilder.kt b/web/core/src/jsMain/kotlin/org/jetbrains/compose/web/attributes/AttrsBuilder.kt index 7ea8ebf5b3..c4c0d1c157 100644 --- a/web/core/src/jsMain/kotlin/org/jetbrains/compose/web/attributes/AttrsBuilder.kt +++ b/web/core/src/jsMain/kotlin/org/jetbrains/compose/web/attributes/AttrsBuilder.kt @@ -61,6 +61,16 @@ open class AttrsBuilder : 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. diff --git a/web/core/src/jsMain/kotlin/org/jetbrains/compose/web/attributes/PredefinedAttrValues.kt b/web/core/src/jsMain/kotlin/org/jetbrains/compose/web/attributes/PredefinedAttrValues.kt index 52fcd3b0e7..00f03352ba 100644 --- a/web/core/src/jsMain/kotlin/org/jetbrains/compose/web/attributes/PredefinedAttrValues.kt +++ b/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 diff --git a/web/core/src/jsTest/kotlin/elements/AttributesTests.kt b/web/core/src/jsTest/kotlin/elements/AttributesTests.kt index ce55090ac2..0062ee2190 100644 --- a/web/core/src/jsTest/kotlin/elements/AttributesTests.kt +++ b/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(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") + } }