From e4189f8262203565843a3e0b459b1f1be068884f Mon Sep 17 00:00:00 2001
From: Marek Mihok <marek.mihok@h2o.ai>
Date: Wed, 15 Nov 2023 12:31:26 +0100
Subject: [PATCH 1/8] feat: show numberic keyboard on ios devices when input
 type is number #2170

---
 py/h2o_lightwave/h2o_lightwave/types.py       | 19 +++++++++++++++++++
 py/h2o_lightwave/h2o_lightwave/ui.py          |  3 +++
 py/h2o_wave/h2o_wave/types.py                 | 19 +++++++++++++++++++
 py/h2o_wave/h2o_wave/ui.py                    |  3 +++
 r/R/ui.R                                      |  9 +++++++--
 .../resources/templates/wave-components.xml   |  3 ++-
 .../vscode-extension/component-snippets.json  |  2 +-
 ui/src/index.scss                             |  2 +-
 ui/src/textbox.tsx                            |  7 ++++++-
 9 files changed, 61 insertions(+), 6 deletions(-)

diff --git a/py/h2o_lightwave/h2o_lightwave/types.py b/py/h2o_lightwave/h2o_lightwave/types.py
index c7dc22ce29..2f574d9200 100644
--- a/py/h2o_lightwave/h2o_lightwave/types.py
+++ b/py/h2o_lightwave/h2o_lightwave/types.py
@@ -969,6 +969,15 @@ def load(__d: Dict) -> 'MessageBar':
         )
 
 
+_TextboxType = ['text', 'number', 'tel']
+
+
+class TextboxType:
+    TEXT = 'text'
+    NUMBER = 'number'
+    TEL = 'tel'
+
+
 class Textbox:
     """Create a text box.
 
@@ -998,6 +1007,7 @@ def __init__(
             visible: Optional[bool] = None,
             tooltip: Optional[str] = None,
             spellcheck: Optional[bool] = None,
+            type: Optional[str] = None,
     ):
         _guard_scalar('Textbox.name', name, (str,), True, False, False)
         _guard_scalar('Textbox.label', label, (str,), False, True, False)
@@ -1019,6 +1029,7 @@ def __init__(
         _guard_scalar('Textbox.visible', visible, (bool,), False, True, False)
         _guard_scalar('Textbox.tooltip', tooltip, (str,), False, True, False)
         _guard_scalar('Textbox.spellcheck', spellcheck, (bool,), False, True, False)
+        _guard_enum('Textbox.type', type, _TextboxType, True)
         self.name = name
         """An identifying name for this component."""
         self.label = label
@@ -1059,6 +1070,8 @@ def __init__(
         """An optional tooltip message displayed when a user clicks the help icon to the right of the component."""
         self.spellcheck = spellcheck
         """True if the text may be checked for spelling errors. Defaults to True."""
+        self.type = type
+        """Input type. Defaults to 'text'. One of 'text', 'number', 'tel'. See enum h2o_wave.ui.TextboxType."""
 
     def dump(self) -> Dict:
         """Returns the contents of this object as a dict."""
@@ -1082,6 +1095,7 @@ def dump(self) -> Dict:
         _guard_scalar('Textbox.visible', self.visible, (bool,), False, True, False)
         _guard_scalar('Textbox.tooltip', self.tooltip, (str,), False, True, False)
         _guard_scalar('Textbox.spellcheck', self.spellcheck, (bool,), False, True, False)
+        _guard_enum('Textbox.type', self.type, _TextboxType, True)
         return _dump(
             name=self.name,
             label=self.label,
@@ -1103,6 +1117,7 @@ def dump(self) -> Dict:
             visible=self.visible,
             tooltip=self.tooltip,
             spellcheck=self.spellcheck,
+            type=self.type,
         )
 
     @staticmethod
@@ -1148,6 +1163,8 @@ def load(__d: Dict) -> 'Textbox':
         _guard_scalar('Textbox.tooltip', __d_tooltip, (str,), False, True, False)
         __d_spellcheck: Any = __d.get('spellcheck')
         _guard_scalar('Textbox.spellcheck', __d_spellcheck, (bool,), False, True, False)
+        __d_type: Any = __d.get('type')
+        _guard_enum('Textbox.type', __d_type, _TextboxType, True)
         name: str = __d_name
         label: Optional[str] = __d_label
         placeholder: Optional[str] = __d_placeholder
@@ -1168,6 +1185,7 @@ def load(__d: Dict) -> 'Textbox':
         visible: Optional[bool] = __d_visible
         tooltip: Optional[str] = __d_tooltip
         spellcheck: Optional[bool] = __d_spellcheck
+        type: Optional[str] = __d_type
         return Textbox(
             name,
             label,
@@ -1189,6 +1207,7 @@ def load(__d: Dict) -> 'Textbox':
             visible,
             tooltip,
             spellcheck,
+            type,
         )
 
 
diff --git a/py/h2o_lightwave/h2o_lightwave/ui.py b/py/h2o_lightwave/h2o_lightwave/ui.py
index 89bafb8628..c271c666ff 100644
--- a/py/h2o_lightwave/h2o_lightwave/ui.py
+++ b/py/h2o_lightwave/h2o_lightwave/ui.py
@@ -398,6 +398,7 @@ def textbox(
         visible: Optional[bool] = None,
         tooltip: Optional[str] = None,
         spellcheck: Optional[bool] = None,
+        type: Optional[str] = None,
 ) -> Component:
     """Create a text box.
 
@@ -426,6 +427,7 @@ def textbox(
         visible: True if the component should be visible. Defaults to True.
         tooltip: An optional tooltip message displayed when a user clicks the help icon to the right of the component.
         spellcheck: True if the text may be checked for spelling errors. Defaults to True.
+        type: Input type. Defaults to 'text'. One of 'text', 'number', 'tel'. See enum h2o_wave.ui.TextboxType.
     Returns:
         A `h2o_wave.types.Textbox` instance.
     """
@@ -450,6 +452,7 @@ def textbox(
         visible,
         tooltip,
         spellcheck,
+        type,
     ))
 
 
diff --git a/py/h2o_wave/h2o_wave/types.py b/py/h2o_wave/h2o_wave/types.py
index c7dc22ce29..2f574d9200 100644
--- a/py/h2o_wave/h2o_wave/types.py
+++ b/py/h2o_wave/h2o_wave/types.py
@@ -969,6 +969,15 @@ def load(__d: Dict) -> 'MessageBar':
         )
 
 
+_TextboxType = ['text', 'number', 'tel']
+
+
+class TextboxType:
+    TEXT = 'text'
+    NUMBER = 'number'
+    TEL = 'tel'
+
+
 class Textbox:
     """Create a text box.
 
@@ -998,6 +1007,7 @@ def __init__(
             visible: Optional[bool] = None,
             tooltip: Optional[str] = None,
             spellcheck: Optional[bool] = None,
+            type: Optional[str] = None,
     ):
         _guard_scalar('Textbox.name', name, (str,), True, False, False)
         _guard_scalar('Textbox.label', label, (str,), False, True, False)
@@ -1019,6 +1029,7 @@ def __init__(
         _guard_scalar('Textbox.visible', visible, (bool,), False, True, False)
         _guard_scalar('Textbox.tooltip', tooltip, (str,), False, True, False)
         _guard_scalar('Textbox.spellcheck', spellcheck, (bool,), False, True, False)
+        _guard_enum('Textbox.type', type, _TextboxType, True)
         self.name = name
         """An identifying name for this component."""
         self.label = label
@@ -1059,6 +1070,8 @@ def __init__(
         """An optional tooltip message displayed when a user clicks the help icon to the right of the component."""
         self.spellcheck = spellcheck
         """True if the text may be checked for spelling errors. Defaults to True."""
+        self.type = type
+        """Input type. Defaults to 'text'. One of 'text', 'number', 'tel'. See enum h2o_wave.ui.TextboxType."""
 
     def dump(self) -> Dict:
         """Returns the contents of this object as a dict."""
@@ -1082,6 +1095,7 @@ def dump(self) -> Dict:
         _guard_scalar('Textbox.visible', self.visible, (bool,), False, True, False)
         _guard_scalar('Textbox.tooltip', self.tooltip, (str,), False, True, False)
         _guard_scalar('Textbox.spellcheck', self.spellcheck, (bool,), False, True, False)
+        _guard_enum('Textbox.type', self.type, _TextboxType, True)
         return _dump(
             name=self.name,
             label=self.label,
@@ -1103,6 +1117,7 @@ def dump(self) -> Dict:
             visible=self.visible,
             tooltip=self.tooltip,
             spellcheck=self.spellcheck,
+            type=self.type,
         )
 
     @staticmethod
@@ -1148,6 +1163,8 @@ def load(__d: Dict) -> 'Textbox':
         _guard_scalar('Textbox.tooltip', __d_tooltip, (str,), False, True, False)
         __d_spellcheck: Any = __d.get('spellcheck')
         _guard_scalar('Textbox.spellcheck', __d_spellcheck, (bool,), False, True, False)
+        __d_type: Any = __d.get('type')
+        _guard_enum('Textbox.type', __d_type, _TextboxType, True)
         name: str = __d_name
         label: Optional[str] = __d_label
         placeholder: Optional[str] = __d_placeholder
@@ -1168,6 +1185,7 @@ def load(__d: Dict) -> 'Textbox':
         visible: Optional[bool] = __d_visible
         tooltip: Optional[str] = __d_tooltip
         spellcheck: Optional[bool] = __d_spellcheck
+        type: Optional[str] = __d_type
         return Textbox(
             name,
             label,
@@ -1189,6 +1207,7 @@ def load(__d: Dict) -> 'Textbox':
             visible,
             tooltip,
             spellcheck,
+            type,
         )
 
 
diff --git a/py/h2o_wave/h2o_wave/ui.py b/py/h2o_wave/h2o_wave/ui.py
index 89bafb8628..c271c666ff 100644
--- a/py/h2o_wave/h2o_wave/ui.py
+++ b/py/h2o_wave/h2o_wave/ui.py
@@ -398,6 +398,7 @@ def textbox(
         visible: Optional[bool] = None,
         tooltip: Optional[str] = None,
         spellcheck: Optional[bool] = None,
+        type: Optional[str] = None,
 ) -> Component:
     """Create a text box.
 
@@ -426,6 +427,7 @@ def textbox(
         visible: True if the component should be visible. Defaults to True.
         tooltip: An optional tooltip message displayed when a user clicks the help icon to the right of the component.
         spellcheck: True if the text may be checked for spelling errors. Defaults to True.
+        type: Input type. Defaults to 'text'. One of 'text', 'number', 'tel'. See enum h2o_wave.ui.TextboxType.
     Returns:
         A `h2o_wave.types.Textbox` instance.
     """
@@ -450,6 +452,7 @@ def textbox(
         visible,
         tooltip,
         spellcheck,
+        type,
     ))
 
 
diff --git a/r/R/ui.R b/r/R/ui.R
index d3ae9aa868..73de63d855 100644
--- a/r/R/ui.R
+++ b/r/R/ui.R
@@ -485,6 +485,8 @@ ui_message_bar <- function(
 #' @param visible True if the component should be visible. Defaults to True.
 #' @param tooltip An optional tooltip message displayed when a user clicks the help icon to the right of the component.
 #' @param spellcheck True if the text may be checked for spelling errors. Defaults to True.
+#' @param type Input type. Defaults to 'text'.
+#'   One of 'text', 'number', 'tel'. See enum h2o_wave.ui.TextboxType.
 #' @return A Textbox instance.
 #' @export
 ui_textbox <- function(
@@ -507,7 +509,8 @@ ui_textbox <- function(
   width = NULL,
   visible = NULL,
   tooltip = NULL,
-  spellcheck = NULL) {
+  spellcheck = NULL,
+  type = NULL) {
   .guard_scalar("name", "character", name)
   .guard_scalar("label", "character", label)
   .guard_scalar("placeholder", "character", placeholder)
@@ -528,6 +531,7 @@ ui_textbox <- function(
   .guard_scalar("visible", "logical", visible)
   .guard_scalar("tooltip", "character", tooltip)
   .guard_scalar("spellcheck", "logical", spellcheck)
+  # TODO Validate type
   .o <- list(textbox=list(
     name=name,
     label=label,
@@ -548,7 +552,8 @@ ui_textbox <- function(
     width=width,
     visible=visible,
     tooltip=tooltip,
-    spellcheck=spellcheck))
+    spellcheck=spellcheck,
+    type=type))
   class(.o) <- append(class(.o), c(.wave_obj, "WaveComponent"))
   return(.o)
 }
diff --git a/tools/intellij-plugin/src/main/resources/templates/wave-components.xml b/tools/intellij-plugin/src/main/resources/templates/wave-components.xml
index 149e668f93..cbd7a92848 100644
--- a/tools/intellij-plugin/src/main/resources/templates/wave-components.xml
+++ b/tools/intellij-plugin/src/main/resources/templates/wave-components.xml
@@ -2620,7 +2620,7 @@
       <option name="Python" value="true"/>
     </context>
   </template>
-  <template name="w_full_textbox" value="ui.textbox(name='$name$',label='$label$',placeholder='$placeholder$',value='$value$',mask='$mask$',icon='$icon$',prefix='$prefix$',suffix='$suffix$',error='$error$',required=$required$,disabled=$disabled$,readonly=$readonly$,multiline=$multiline$,password=$password$,trigger=$trigger$,height='$height$',width='$width$',visible=$visible$,tooltip='$tooltip$',spellcheck=$spellcheck$),$END$" description="Create Wave Textbox with full attributes." toReformat="true" toShortenFQNames="true">
+  <template name="w_full_textbox" value="ui.textbox(name='$name$',label='$label$',placeholder='$placeholder$',value='$value$',mask='$mask$',icon='$icon$',prefix='$prefix$',suffix='$suffix$',error='$error$',required=$required$,disabled=$disabled$,readonly=$readonly$,multiline=$multiline$,password=$password$,trigger=$trigger$,height='$height$',width='$width$',visible=$visible$,tooltip='$tooltip$',spellcheck=$spellcheck$,type='$type$'),$END$" description="Create Wave Textbox with full attributes." toReformat="true" toShortenFQNames="true">
     <variable name="name" expression="" defaultValue="" alwaysStopAt="true"/>
     <variable name="label" expression="" defaultValue="" alwaysStopAt="true"/>
     <variable name="placeholder" expression="" defaultValue="" alwaysStopAt="true"/>
@@ -2641,6 +2641,7 @@
     <variable name="visible" expression="" defaultValue="&quot;True&quot;" alwaysStopAt="true"/>
     <variable name="tooltip" expression="" defaultValue="" alwaysStopAt="true"/>
     <variable name="spellcheck" expression="" defaultValue="&quot;True&quot;" alwaysStopAt="true"/>
+    <variable name="type" expression="" defaultValue="&quot;text&quot;" alwaysStopAt="true"/>
     <context>
       <option name="Python" value="true"/>
     </context>
diff --git a/tools/vscode-extension/component-snippets.json b/tools/vscode-extension/component-snippets.json
index 2e60ea8139..0d868dbd38 100644
--- a/tools/vscode-extension/component-snippets.json
+++ b/tools/vscode-extension/component-snippets.json
@@ -1906,7 +1906,7 @@
   "Wave Full Textbox": {
     "prefix": "w_full_textbox",
     "body": [
-      "ui.textbox(name='$1', label='$2', placeholder='$3', value='$4', mask='$5', icon='$6', prefix='$7', suffix='$8', error='$9', required=${10:False}, disabled=${11:False}, readonly=${12:False}, multiline=${13:False}, password=${14:False}, trigger=${15:False}, height='$16', width='${17:100%}', visible=${18:True}, tooltip='$19', spellcheck=${20:True}),$0"
+      "ui.textbox(name='$1', label='$2', placeholder='$3', value='$4', mask='$5', icon='$6', prefix='$7', suffix='$8', error='$9', required=${10:False}, disabled=${11:False}, readonly=${12:False}, multiline=${13:False}, password=${14:False}, trigger=${15:False}, height='$16', width='${17:100%}', visible=${18:True}, tooltip='$19', spellcheck=${20:True}, type='${21:text}'),$0"
     ],
     "description": "Create a full Wave Textbox."
   },
diff --git a/ui/src/index.scss b/ui/src/index.scss
index 9186970982..d11b18b044 100644
--- a/ui/src/index.scss
+++ b/ui/src/index.scss
@@ -246,4 +246,4 @@ $tracking in $fontTrackings {
   to {
     opacity: 1;
   }
-}
\ No newline at end of file
+}
diff --git a/ui/src/textbox.tsx b/ui/src/textbox.tsx
index bd270aaae5..3cbcfcf4ad 100644
--- a/ui/src/textbox.tsx
+++ b/ui/src/textbox.tsx
@@ -65,6 +65,8 @@ export interface Textbox {
   tooltip?: S
   /** True if the text may be checked for spelling errors. Defaults to True. */
   spellcheck?: B
+  /** Input type. Defaults to 'text'. */
+  type?: 'text' | 'number' | 'tel'
 }
 
 const DEBOUNCE_TIMEOUT = 500
@@ -96,7 +98,10 @@ export const
         suffix: m.suffix,
         multiline: m.multiline,
         spellCheck: m.spellcheck,
-        type: m.password ? 'password' : undefined,
+        type: m.password ? 'password' : (m.type || 'text'),
+        className: m.type === 'number' ? 'textfield-number' : undefined,
+        // Disable setting number with scroll for number fields.
+        onWheel: m.type === 'number' ? e => e.currentTarget.blur() : undefined,
       }
 
     React.useEffect(() => {

From 6e301a3a9853b4ca7cc440b3cb3372995f63117f Mon Sep 17 00:00:00 2001
From: Marek Mihok <marek.mihok@h2o.ai>
Date: Wed, 15 Nov 2023 12:52:34 +0100
Subject: [PATCH 2/8] chore: rename type prop to keyboard, update textbox
 example #2170

---
 py/examples/textbox.py                        |  4 ++++
 py/h2o_lightwave/h2o_lightwave/types.py       | 24 +++++++++----------
 py/h2o_lightwave/h2o_lightwave/ui.py          |  6 ++---
 py/h2o_wave/h2o_wave/types.py                 | 24 +++++++++----------
 py/h2o_wave/h2o_wave/ui.py                    |  6 ++---
 r/R/ui.R                                      | 10 ++++----
 .../resources/templates/wave-components.xml   |  4 ++--
 .../vscode-extension/component-snippets.json  |  2 +-
 ui/src/textbox.tsx                            | 11 +++++----
 9 files changed, 48 insertions(+), 43 deletions(-)

diff --git a/py/examples/textbox.py b/py/examples/textbox.py
index 39c29bdee3..df83bcbd44 100644
--- a/py/examples/textbox.py
+++ b/py/examples/textbox.py
@@ -22,6 +22,8 @@ async def serve(q: Q):
             ui.text(f'textbox_disabled_placeholder={q.args.textbox_disabled_placeholder}'),
             ui.text(f'textbox_multiline={q.args.textbox_multiline}'),
             ui.text(f'textbox_spellcheck_disabled={q.args.textbox_spellcheck_disabled}'),
+            ui.text(f'textbox_numeric={q.args.textbox_numeric}'),
+            ui.text(f'textbox_tel={q.args.textbox_tel}'),
             ui.button(name='show_form', label='Back', primary=True),
         ]
     else:
@@ -40,6 +42,8 @@ async def serve(q: Q):
                        placeholder='I am disabled'),
             ui.textbox(name='textbox_multiline', label='Multiline textarea', multiline=True),
             ui.textbox(name='textbox_spellcheck_disabled', label='Spellcheck disabled', spellcheck=False),
+            ui.textbox(name='textbox_numeric', label='With numeric keyboard (iOS, Android)', keyboard='number'),
+            ui.textbox(name='textbox_tel', label='With telephone keyboard (iOS, Android)', keyboard='tel'),
             ui.button(name='show_inputs', label='Submit', primary=True),
         ])
     await q.page.save()
diff --git a/py/h2o_lightwave/h2o_lightwave/types.py b/py/h2o_lightwave/h2o_lightwave/types.py
index 2f574d9200..c741d59868 100644
--- a/py/h2o_lightwave/h2o_lightwave/types.py
+++ b/py/h2o_lightwave/h2o_lightwave/types.py
@@ -969,10 +969,10 @@ def load(__d: Dict) -> 'MessageBar':
         )
 
 
-_TextboxType = ['text', 'number', 'tel']
+_TextboxKeyboard = ['text', 'number', 'tel']
 
 
-class TextboxType:
+class TextboxKeyboard:
     TEXT = 'text'
     NUMBER = 'number'
     TEL = 'tel'
@@ -1007,7 +1007,7 @@ def __init__(
             visible: Optional[bool] = None,
             tooltip: Optional[str] = None,
             spellcheck: Optional[bool] = None,
-            type: Optional[str] = None,
+            keyboard: Optional[str] = None,
     ):
         _guard_scalar('Textbox.name', name, (str,), True, False, False)
         _guard_scalar('Textbox.label', label, (str,), False, True, False)
@@ -1029,7 +1029,7 @@ def __init__(
         _guard_scalar('Textbox.visible', visible, (bool,), False, True, False)
         _guard_scalar('Textbox.tooltip', tooltip, (str,), False, True, False)
         _guard_scalar('Textbox.spellcheck', spellcheck, (bool,), False, True, False)
-        _guard_enum('Textbox.type', type, _TextboxType, True)
+        _guard_enum('Textbox.keyboard', keyboard, _TextboxKeyboard, True)
         self.name = name
         """An identifying name for this component."""
         self.label = label
@@ -1070,8 +1070,8 @@ def __init__(
         """An optional tooltip message displayed when a user clicks the help icon to the right of the component."""
         self.spellcheck = spellcheck
         """True if the text may be checked for spelling errors. Defaults to True."""
-        self.type = type
-        """Input type. Defaults to 'text'. One of 'text', 'number', 'tel'. See enum h2o_wave.ui.TextboxType."""
+        self.keyboard = keyboard
+        """Keyboard to be shown on mobile devices. Defaults to 'text'. One of 'text', 'number', 'tel'. See enum h2o_wave.ui.TextboxKeyboard."""
 
     def dump(self) -> Dict:
         """Returns the contents of this object as a dict."""
@@ -1095,7 +1095,7 @@ def dump(self) -> Dict:
         _guard_scalar('Textbox.visible', self.visible, (bool,), False, True, False)
         _guard_scalar('Textbox.tooltip', self.tooltip, (str,), False, True, False)
         _guard_scalar('Textbox.spellcheck', self.spellcheck, (bool,), False, True, False)
-        _guard_enum('Textbox.type', self.type, _TextboxType, True)
+        _guard_enum('Textbox.keyboard', self.keyboard, _TextboxKeyboard, True)
         return _dump(
             name=self.name,
             label=self.label,
@@ -1117,7 +1117,7 @@ def dump(self) -> Dict:
             visible=self.visible,
             tooltip=self.tooltip,
             spellcheck=self.spellcheck,
-            type=self.type,
+            keyboard=self.keyboard,
         )
 
     @staticmethod
@@ -1163,8 +1163,8 @@ def load(__d: Dict) -> 'Textbox':
         _guard_scalar('Textbox.tooltip', __d_tooltip, (str,), False, True, False)
         __d_spellcheck: Any = __d.get('spellcheck')
         _guard_scalar('Textbox.spellcheck', __d_spellcheck, (bool,), False, True, False)
-        __d_type: Any = __d.get('type')
-        _guard_enum('Textbox.type', __d_type, _TextboxType, True)
+        __d_keyboard: Any = __d.get('keyboard')
+        _guard_enum('Textbox.keyboard', __d_keyboard, _TextboxKeyboard, True)
         name: str = __d_name
         label: Optional[str] = __d_label
         placeholder: Optional[str] = __d_placeholder
@@ -1185,7 +1185,7 @@ def load(__d: Dict) -> 'Textbox':
         visible: Optional[bool] = __d_visible
         tooltip: Optional[str] = __d_tooltip
         spellcheck: Optional[bool] = __d_spellcheck
-        type: Optional[str] = __d_type
+        keyboard: Optional[str] = __d_keyboard
         return Textbox(
             name,
             label,
@@ -1207,7 +1207,7 @@ def load(__d: Dict) -> 'Textbox':
             visible,
             tooltip,
             spellcheck,
-            type,
+            keyboard,
         )
 
 
diff --git a/py/h2o_lightwave/h2o_lightwave/ui.py b/py/h2o_lightwave/h2o_lightwave/ui.py
index c271c666ff..75e63e3d41 100644
--- a/py/h2o_lightwave/h2o_lightwave/ui.py
+++ b/py/h2o_lightwave/h2o_lightwave/ui.py
@@ -398,7 +398,7 @@ def textbox(
         visible: Optional[bool] = None,
         tooltip: Optional[str] = None,
         spellcheck: Optional[bool] = None,
-        type: Optional[str] = None,
+        keyboard: Optional[str] = None,
 ) -> Component:
     """Create a text box.
 
@@ -427,7 +427,7 @@ def textbox(
         visible: True if the component should be visible. Defaults to True.
         tooltip: An optional tooltip message displayed when a user clicks the help icon to the right of the component.
         spellcheck: True if the text may be checked for spelling errors. Defaults to True.
-        type: Input type. Defaults to 'text'. One of 'text', 'number', 'tel'. See enum h2o_wave.ui.TextboxType.
+        keyboard: Keyboard to be shown on mobile devices. Defaults to 'text'. One of 'text', 'number', 'tel'. See enum h2o_wave.ui.TextboxKeyboard.
     Returns:
         A `h2o_wave.types.Textbox` instance.
     """
@@ -452,7 +452,7 @@ def textbox(
         visible,
         tooltip,
         spellcheck,
-        type,
+        keyboard,
     ))
 
 
diff --git a/py/h2o_wave/h2o_wave/types.py b/py/h2o_wave/h2o_wave/types.py
index 2f574d9200..c741d59868 100644
--- a/py/h2o_wave/h2o_wave/types.py
+++ b/py/h2o_wave/h2o_wave/types.py
@@ -969,10 +969,10 @@ def load(__d: Dict) -> 'MessageBar':
         )
 
 
-_TextboxType = ['text', 'number', 'tel']
+_TextboxKeyboard = ['text', 'number', 'tel']
 
 
-class TextboxType:
+class TextboxKeyboard:
     TEXT = 'text'
     NUMBER = 'number'
     TEL = 'tel'
@@ -1007,7 +1007,7 @@ def __init__(
             visible: Optional[bool] = None,
             tooltip: Optional[str] = None,
             spellcheck: Optional[bool] = None,
-            type: Optional[str] = None,
+            keyboard: Optional[str] = None,
     ):
         _guard_scalar('Textbox.name', name, (str,), True, False, False)
         _guard_scalar('Textbox.label', label, (str,), False, True, False)
@@ -1029,7 +1029,7 @@ def __init__(
         _guard_scalar('Textbox.visible', visible, (bool,), False, True, False)
         _guard_scalar('Textbox.tooltip', tooltip, (str,), False, True, False)
         _guard_scalar('Textbox.spellcheck', spellcheck, (bool,), False, True, False)
-        _guard_enum('Textbox.type', type, _TextboxType, True)
+        _guard_enum('Textbox.keyboard', keyboard, _TextboxKeyboard, True)
         self.name = name
         """An identifying name for this component."""
         self.label = label
@@ -1070,8 +1070,8 @@ def __init__(
         """An optional tooltip message displayed when a user clicks the help icon to the right of the component."""
         self.spellcheck = spellcheck
         """True if the text may be checked for spelling errors. Defaults to True."""
-        self.type = type
-        """Input type. Defaults to 'text'. One of 'text', 'number', 'tel'. See enum h2o_wave.ui.TextboxType."""
+        self.keyboard = keyboard
+        """Keyboard to be shown on mobile devices. Defaults to 'text'. One of 'text', 'number', 'tel'. See enum h2o_wave.ui.TextboxKeyboard."""
 
     def dump(self) -> Dict:
         """Returns the contents of this object as a dict."""
@@ -1095,7 +1095,7 @@ def dump(self) -> Dict:
         _guard_scalar('Textbox.visible', self.visible, (bool,), False, True, False)
         _guard_scalar('Textbox.tooltip', self.tooltip, (str,), False, True, False)
         _guard_scalar('Textbox.spellcheck', self.spellcheck, (bool,), False, True, False)
-        _guard_enum('Textbox.type', self.type, _TextboxType, True)
+        _guard_enum('Textbox.keyboard', self.keyboard, _TextboxKeyboard, True)
         return _dump(
             name=self.name,
             label=self.label,
@@ -1117,7 +1117,7 @@ def dump(self) -> Dict:
             visible=self.visible,
             tooltip=self.tooltip,
             spellcheck=self.spellcheck,
-            type=self.type,
+            keyboard=self.keyboard,
         )
 
     @staticmethod
@@ -1163,8 +1163,8 @@ def load(__d: Dict) -> 'Textbox':
         _guard_scalar('Textbox.tooltip', __d_tooltip, (str,), False, True, False)
         __d_spellcheck: Any = __d.get('spellcheck')
         _guard_scalar('Textbox.spellcheck', __d_spellcheck, (bool,), False, True, False)
-        __d_type: Any = __d.get('type')
-        _guard_enum('Textbox.type', __d_type, _TextboxType, True)
+        __d_keyboard: Any = __d.get('keyboard')
+        _guard_enum('Textbox.keyboard', __d_keyboard, _TextboxKeyboard, True)
         name: str = __d_name
         label: Optional[str] = __d_label
         placeholder: Optional[str] = __d_placeholder
@@ -1185,7 +1185,7 @@ def load(__d: Dict) -> 'Textbox':
         visible: Optional[bool] = __d_visible
         tooltip: Optional[str] = __d_tooltip
         spellcheck: Optional[bool] = __d_spellcheck
-        type: Optional[str] = __d_type
+        keyboard: Optional[str] = __d_keyboard
         return Textbox(
             name,
             label,
@@ -1207,7 +1207,7 @@ def load(__d: Dict) -> 'Textbox':
             visible,
             tooltip,
             spellcheck,
-            type,
+            keyboard,
         )
 
 
diff --git a/py/h2o_wave/h2o_wave/ui.py b/py/h2o_wave/h2o_wave/ui.py
index c271c666ff..75e63e3d41 100644
--- a/py/h2o_wave/h2o_wave/ui.py
+++ b/py/h2o_wave/h2o_wave/ui.py
@@ -398,7 +398,7 @@ def textbox(
         visible: Optional[bool] = None,
         tooltip: Optional[str] = None,
         spellcheck: Optional[bool] = None,
-        type: Optional[str] = None,
+        keyboard: Optional[str] = None,
 ) -> Component:
     """Create a text box.
 
@@ -427,7 +427,7 @@ def textbox(
         visible: True if the component should be visible. Defaults to True.
         tooltip: An optional tooltip message displayed when a user clicks the help icon to the right of the component.
         spellcheck: True if the text may be checked for spelling errors. Defaults to True.
-        type: Input type. Defaults to 'text'. One of 'text', 'number', 'tel'. See enum h2o_wave.ui.TextboxType.
+        keyboard: Keyboard to be shown on mobile devices. Defaults to 'text'. One of 'text', 'number', 'tel'. See enum h2o_wave.ui.TextboxKeyboard.
     Returns:
         A `h2o_wave.types.Textbox` instance.
     """
@@ -452,7 +452,7 @@ def textbox(
         visible,
         tooltip,
         spellcheck,
-        type,
+        keyboard,
     ))
 
 
diff --git a/r/R/ui.R b/r/R/ui.R
index 73de63d855..e21f90c70b 100644
--- a/r/R/ui.R
+++ b/r/R/ui.R
@@ -485,8 +485,8 @@ ui_message_bar <- function(
 #' @param visible True if the component should be visible. Defaults to True.
 #' @param tooltip An optional tooltip message displayed when a user clicks the help icon to the right of the component.
 #' @param spellcheck True if the text may be checked for spelling errors. Defaults to True.
-#' @param type Input type. Defaults to 'text'.
-#'   One of 'text', 'number', 'tel'. See enum h2o_wave.ui.TextboxType.
+#' @param keyboard Keyboard to be shown on mobile devices. Defaults to 'text'.
+#'   One of 'text', 'number', 'tel'. See enum h2o_wave.ui.TextboxKeyboard.
 #' @return A Textbox instance.
 #' @export
 ui_textbox <- function(
@@ -510,7 +510,7 @@ ui_textbox <- function(
   visible = NULL,
   tooltip = NULL,
   spellcheck = NULL,
-  type = NULL) {
+  keyboard = NULL) {
   .guard_scalar("name", "character", name)
   .guard_scalar("label", "character", label)
   .guard_scalar("placeholder", "character", placeholder)
@@ -531,7 +531,7 @@ ui_textbox <- function(
   .guard_scalar("visible", "logical", visible)
   .guard_scalar("tooltip", "character", tooltip)
   .guard_scalar("spellcheck", "logical", spellcheck)
-  # TODO Validate type
+  # TODO Validate keyboard
   .o <- list(textbox=list(
     name=name,
     label=label,
@@ -553,7 +553,7 @@ ui_textbox <- function(
     visible=visible,
     tooltip=tooltip,
     spellcheck=spellcheck,
-    type=type))
+    keyboard=keyboard))
   class(.o) <- append(class(.o), c(.wave_obj, "WaveComponent"))
   return(.o)
 }
diff --git a/tools/intellij-plugin/src/main/resources/templates/wave-components.xml b/tools/intellij-plugin/src/main/resources/templates/wave-components.xml
index cbd7a92848..42a0201dee 100644
--- a/tools/intellij-plugin/src/main/resources/templates/wave-components.xml
+++ b/tools/intellij-plugin/src/main/resources/templates/wave-components.xml
@@ -2620,7 +2620,7 @@
       <option name="Python" value="true"/>
     </context>
   </template>
-  <template name="w_full_textbox" value="ui.textbox(name='$name$',label='$label$',placeholder='$placeholder$',value='$value$',mask='$mask$',icon='$icon$',prefix='$prefix$',suffix='$suffix$',error='$error$',required=$required$,disabled=$disabled$,readonly=$readonly$,multiline=$multiline$,password=$password$,trigger=$trigger$,height='$height$',width='$width$',visible=$visible$,tooltip='$tooltip$',spellcheck=$spellcheck$,type='$type$'),$END$" description="Create Wave Textbox with full attributes." toReformat="true" toShortenFQNames="true">
+  <template name="w_full_textbox" value="ui.textbox(name='$name$',label='$label$',placeholder='$placeholder$',value='$value$',mask='$mask$',icon='$icon$',prefix='$prefix$',suffix='$suffix$',error='$error$',required=$required$,disabled=$disabled$,readonly=$readonly$,multiline=$multiline$,password=$password$,trigger=$trigger$,height='$height$',width='$width$',visible=$visible$,tooltip='$tooltip$',spellcheck=$spellcheck$,keyboard='$keyboard$'),$END$" description="Create Wave Textbox with full attributes." toReformat="true" toShortenFQNames="true">
     <variable name="name" expression="" defaultValue="" alwaysStopAt="true"/>
     <variable name="label" expression="" defaultValue="" alwaysStopAt="true"/>
     <variable name="placeholder" expression="" defaultValue="" alwaysStopAt="true"/>
@@ -2641,7 +2641,7 @@
     <variable name="visible" expression="" defaultValue="&quot;True&quot;" alwaysStopAt="true"/>
     <variable name="tooltip" expression="" defaultValue="" alwaysStopAt="true"/>
     <variable name="spellcheck" expression="" defaultValue="&quot;True&quot;" alwaysStopAt="true"/>
-    <variable name="type" expression="" defaultValue="&quot;text&quot;" alwaysStopAt="true"/>
+    <variable name="keyboard" expression="" defaultValue="&quot;text&quot;" alwaysStopAt="true"/>
     <context>
       <option name="Python" value="true"/>
     </context>
diff --git a/tools/vscode-extension/component-snippets.json b/tools/vscode-extension/component-snippets.json
index 0d868dbd38..844e639e3c 100644
--- a/tools/vscode-extension/component-snippets.json
+++ b/tools/vscode-extension/component-snippets.json
@@ -1906,7 +1906,7 @@
   "Wave Full Textbox": {
     "prefix": "w_full_textbox",
     "body": [
-      "ui.textbox(name='$1', label='$2', placeholder='$3', value='$4', mask='$5', icon='$6', prefix='$7', suffix='$8', error='$9', required=${10:False}, disabled=${11:False}, readonly=${12:False}, multiline=${13:False}, password=${14:False}, trigger=${15:False}, height='$16', width='${17:100%}', visible=${18:True}, tooltip='$19', spellcheck=${20:True}, type='${21:text}'),$0"
+      "ui.textbox(name='$1', label='$2', placeholder='$3', value='$4', mask='$5', icon='$6', prefix='$7', suffix='$8', error='$9', required=${10:False}, disabled=${11:False}, readonly=${12:False}, multiline=${13:False}, password=${14:False}, trigger=${15:False}, height='$16', width='${17:100%}', visible=${18:True}, tooltip='$19', spellcheck=${20:True}, keyboard='${21:text}'),$0"
     ],
     "description": "Create a full Wave Textbox."
   },
diff --git a/ui/src/textbox.tsx b/ui/src/textbox.tsx
index 3cbcfcf4ad..ff6b6067a2 100644
--- a/ui/src/textbox.tsx
+++ b/ui/src/textbox.tsx
@@ -65,8 +65,8 @@ export interface Textbox {
   tooltip?: S
   /** True if the text may be checked for spelling errors. Defaults to True. */
   spellcheck?: B
-  /** Input type. Defaults to 'text'. */
-  type?: 'text' | 'number' | 'tel'
+  /** Keyboard to be shown on mobile devices. Defaults to 'text'. */
+  keyboard?: 'text' | 'number' | 'tel'
 }
 
 const DEBOUNCE_TIMEOUT = 500
@@ -98,10 +98,11 @@ export const
         suffix: m.suffix,
         multiline: m.multiline,
         spellCheck: m.spellcheck,
-        type: m.password ? 'password' : (m.type || 'text'),
-        className: m.type === 'number' ? 'textfield-number' : undefined,
+        type: m.password ? 'password' : (m.keyboard || 'text'),
+        // Hide up/down arrows for number fields.
+        className: m.keyboard === 'number' ? 'textfield-number' : undefined,
         // Disable setting number with scroll for number fields.
-        onWheel: m.type === 'number' ? e => e.currentTarget.blur() : undefined,
+        onWheel: m.keyboard === 'number' ? e => e.currentTarget.blur() : undefined,
       }
 
     React.useEffect(() => {

From 96e2919bdd93d4f1573dc95e1fa1b908517f53cc Mon Sep 17 00:00:00 2001
From: Marek Mihok <marek.mihok@h2o.ai>
Date: Wed, 15 Nov 2023 17:53:30 +0100
Subject: [PATCH 3/8] chore: update docs, refactor #2170

---
 ui/src/textbox.tsx              | 31 +++++++++++++++++--------------
 website/widgets/form/textbox.md | 23 +++++++++++++++++++++++
 2 files changed, 40 insertions(+), 14 deletions(-)

diff --git a/ui/src/textbox.tsx b/ui/src/textbox.tsx
index ff6b6067a2..8bacc55e8c 100644
--- a/ui/src/textbox.tsx
+++ b/ui/src/textbox.tsx
@@ -17,6 +17,14 @@ import { B, Id, S } from './core'
 import React from 'react'
 import { debounce, wave } from './ui'
 
+const hideFieldArrowsStyle = {
+  '&::-webkit-outer-spin-button, &::-webkit-inner-spin-button': {
+    '-webkit-appearance': 'none',
+    margin: 0,
+  },
+  '-moz-appearance': 'textfield',
+}
+
 /**
  * Create a text box.
  *
@@ -83,6 +91,11 @@ export const
         setValue(v)
         m.value = v
       },
+      customHeight = !m.mask && m.multiline && m.height && !m.height.endsWith('%') ? m.height : undefined,
+      styles = {
+        field: { height: customHeight, ...(m.keyboard === 'number' ? hideFieldArrowsStyle : {}) },
+        fieldGroup: { minHeight: customHeight },
+      },
       textFieldProps: Fluent.ITextFieldProps & { 'data-test': S } = {
         'data-test': m.name,
         label: m.label,
@@ -99,10 +112,9 @@ export const
         multiline: m.multiline,
         spellCheck: m.spellcheck,
         type: m.password ? 'password' : (m.keyboard || 'text'),
-        // Hide up/down arrows for number fields.
-        className: m.keyboard === 'number' ? 'textfield-number' : undefined,
-        // Disable setting number with scroll for number fields.
-        onWheel: m.keyboard === 'number' ? e => e.currentTarget.blur() : undefined,
+        styles,
+        onWheel: m.keyboard === 'number' ? e => e.currentTarget.blur() : undefined, // Disable setting number with scroll.
+        onKeyDown: m.keyboard === 'number' ? e => e.preventDefault() : undefined, // Disable setting number with keyboard arrows.
       }
 
     React.useEffect(() => {
@@ -112,14 +124,5 @@ export const
 
     return m.mask
       ? <Fluent.MaskedTextField mask={m.mask} {...textFieldProps} />
-      : (
-        <Fluent.TextField
-          styles={
-            m.multiline && m.height && !m.height.endsWith('%')
-              ? { field: { height: m.height }, fieldGroup: { minHeight: m.height } }
-              : undefined
-          }
-          {...textFieldProps}
-        />
-      )
+      : <Fluent.TextField {...textFieldProps} />
   }
\ No newline at end of file
diff --git a/website/widgets/form/textbox.md b/website/widgets/form/textbox.md
index 68cca3a668..de57739f09 100644
--- a/website/widgets/form/textbox.md
+++ b/website/widgets/form/textbox.md
@@ -137,3 +137,26 @@ q.page['example'] = ui.form_card(
                       value="I have spellcheck disabld", spellcheck=False)]
 )
 ```
+
+## Mobile keyboard layout
+
+Show proper keyboard layout on mobile devices with `keyboard` attribute. Defaults to `text`.
+This does not prevent user from typing any character. If you want to allow typing e.g. numeric characters only, use in combination with [mask](#with-mask).
+
+```py
+q.page['example'] = ui.form_card(
+    box='1 1 2 2',
+    items=[
+        ui.textbox(
+            name='textbox_keyboard_numeric', 
+            label='With numeric keyboard (iOS, Android)', 
+            keyboard='number'
+            ),
+        ui.textbox(
+            name='textbox_keyboard_telephone', 
+            label='With numeric keyboard (iOS, Android)', 
+            keyboard='tel'
+            )
+        ]
+)
+```

From 4b60f76328a596b5a0477ba1acb5db498de32e56 Mon Sep 17 00:00:00 2001
From: Marek Mihok <marek.mihok@h2o.ai>
Date: Wed, 15 Nov 2023 17:55:59 +0100
Subject: [PATCH 4/8] chore: provide more detail in docs #2170

---
 website/widgets/form/textbox.md | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/website/widgets/form/textbox.md b/website/widgets/form/textbox.md
index de57739f09..4590bfbc3b 100644
--- a/website/widgets/form/textbox.md
+++ b/website/widgets/form/textbox.md
@@ -149,12 +149,14 @@ q.page['example'] = ui.form_card(
     items=[
         ui.textbox(
             name='textbox_keyboard_numeric', 
-            label='With numeric keyboard (iOS, Android)', 
+            label='With numeric keyboard (iOS, Android)',
+            # Show numeric keyboard
             keyboard='number'
             ),
         ui.textbox(
             name='textbox_keyboard_telephone', 
-            label='With numeric keyboard (iOS, Android)', 
+            label='With numeric keyboard (iOS, Android)',
+            # Show telephone keyboard
             keyboard='tel'
             )
         ]

From 1f4b452f41ad0fafe81801546bd9f9f5e03fb164 Mon Sep 17 00:00:00 2001
From: Marek Mihok <marek.mihok@h2o.ai>
Date: Thu, 16 Nov 2023 12:00:17 +0100
Subject: [PATCH 5/8] chore: keep native browser behavior for tel|number input
 type #2170

---
 py/examples/textbox.py                        |  4 +--
 py/h2o_lightwave/h2o_lightwave/types.py       | 24 ++++++++--------
 py/h2o_lightwave/h2o_lightwave/ui.py          |  6 ++--
 py/h2o_wave/h2o_wave/types.py                 | 24 ++++++++--------
 py/h2o_wave/h2o_wave/ui.py                    |  6 ++--
 r/R/ui.R                                      | 10 +++----
 .../resources/templates/wave-components.xml   |  4 +--
 .../vscode-extension/component-snippets.json  |  2 +-
 ui/src/textbox.tsx                            | 28 ++++++++-----------
 website/widgets/form/textbox.md               |  4 +--
 10 files changed, 53 insertions(+), 59 deletions(-)

diff --git a/py/examples/textbox.py b/py/examples/textbox.py
index df83bcbd44..1a51bcbe0d 100644
--- a/py/examples/textbox.py
+++ b/py/examples/textbox.py
@@ -42,8 +42,8 @@ async def serve(q: Q):
                        placeholder='I am disabled'),
             ui.textbox(name='textbox_multiline', label='Multiline textarea', multiline=True),
             ui.textbox(name='textbox_spellcheck_disabled', label='Spellcheck disabled', spellcheck=False),
-            ui.textbox(name='textbox_numeric', label='With numeric keyboard (iOS, Android)', keyboard='number'),
-            ui.textbox(name='textbox_tel', label='With telephone keyboard (iOS, Android)', keyboard='tel'),
+            ui.textbox(name='textbox_numeric', label='With numeric keyboard (iOS, Android)', type='number'),
+            ui.textbox(name='textbox_tel', label='With telephone keyboard (iOS, Android)', type='tel'),
             ui.button(name='show_inputs', label='Submit', primary=True),
         ])
     await q.page.save()
diff --git a/py/h2o_lightwave/h2o_lightwave/types.py b/py/h2o_lightwave/h2o_lightwave/types.py
index c741d59868..80f892cd71 100644
--- a/py/h2o_lightwave/h2o_lightwave/types.py
+++ b/py/h2o_lightwave/h2o_lightwave/types.py
@@ -969,10 +969,10 @@ def load(__d: Dict) -> 'MessageBar':
         )
 
 
-_TextboxKeyboard = ['text', 'number', 'tel']
+_TextboxType = ['text', 'number', 'tel']
 
 
-class TextboxKeyboard:
+class TextboxType:
     TEXT = 'text'
     NUMBER = 'number'
     TEL = 'tel'
@@ -1007,7 +1007,7 @@ def __init__(
             visible: Optional[bool] = None,
             tooltip: Optional[str] = None,
             spellcheck: Optional[bool] = None,
-            keyboard: Optional[str] = None,
+            type: Optional[str] = None,
     ):
         _guard_scalar('Textbox.name', name, (str,), True, False, False)
         _guard_scalar('Textbox.label', label, (str,), False, True, False)
@@ -1029,7 +1029,7 @@ def __init__(
         _guard_scalar('Textbox.visible', visible, (bool,), False, True, False)
         _guard_scalar('Textbox.tooltip', tooltip, (str,), False, True, False)
         _guard_scalar('Textbox.spellcheck', spellcheck, (bool,), False, True, False)
-        _guard_enum('Textbox.keyboard', keyboard, _TextboxKeyboard, True)
+        _guard_enum('Textbox.type', type, _TextboxType, True)
         self.name = name
         """An identifying name for this component."""
         self.label = label
@@ -1070,8 +1070,8 @@ def __init__(
         """An optional tooltip message displayed when a user clicks the help icon to the right of the component."""
         self.spellcheck = spellcheck
         """True if the text may be checked for spelling errors. Defaults to True."""
-        self.keyboard = keyboard
-        """Keyboard to be shown on mobile devices. Defaults to 'text'. One of 'text', 'number', 'tel'. See enum h2o_wave.ui.TextboxKeyboard."""
+        self.type = type
+        """Keyboard to be shown on mobile devices. Defaults to 'text'. One of 'text', 'number', 'tel'. See enum h2o_wave.ui.TextboxType."""
 
     def dump(self) -> Dict:
         """Returns the contents of this object as a dict."""
@@ -1095,7 +1095,7 @@ def dump(self) -> Dict:
         _guard_scalar('Textbox.visible', self.visible, (bool,), False, True, False)
         _guard_scalar('Textbox.tooltip', self.tooltip, (str,), False, True, False)
         _guard_scalar('Textbox.spellcheck', self.spellcheck, (bool,), False, True, False)
-        _guard_enum('Textbox.keyboard', self.keyboard, _TextboxKeyboard, True)
+        _guard_enum('Textbox.type', self.type, _TextboxType, True)
         return _dump(
             name=self.name,
             label=self.label,
@@ -1117,7 +1117,7 @@ def dump(self) -> Dict:
             visible=self.visible,
             tooltip=self.tooltip,
             spellcheck=self.spellcheck,
-            keyboard=self.keyboard,
+            type=self.type,
         )
 
     @staticmethod
@@ -1163,8 +1163,8 @@ def load(__d: Dict) -> 'Textbox':
         _guard_scalar('Textbox.tooltip', __d_tooltip, (str,), False, True, False)
         __d_spellcheck: Any = __d.get('spellcheck')
         _guard_scalar('Textbox.spellcheck', __d_spellcheck, (bool,), False, True, False)
-        __d_keyboard: Any = __d.get('keyboard')
-        _guard_enum('Textbox.keyboard', __d_keyboard, _TextboxKeyboard, True)
+        __d_type: Any = __d.get('type')
+        _guard_enum('Textbox.type', __d_type, _TextboxType, True)
         name: str = __d_name
         label: Optional[str] = __d_label
         placeholder: Optional[str] = __d_placeholder
@@ -1185,7 +1185,7 @@ def load(__d: Dict) -> 'Textbox':
         visible: Optional[bool] = __d_visible
         tooltip: Optional[str] = __d_tooltip
         spellcheck: Optional[bool] = __d_spellcheck
-        keyboard: Optional[str] = __d_keyboard
+        type: Optional[str] = __d_type
         return Textbox(
             name,
             label,
@@ -1207,7 +1207,7 @@ def load(__d: Dict) -> 'Textbox':
             visible,
             tooltip,
             spellcheck,
-            keyboard,
+            type,
         )
 
 
diff --git a/py/h2o_lightwave/h2o_lightwave/ui.py b/py/h2o_lightwave/h2o_lightwave/ui.py
index 75e63e3d41..13c88404c2 100644
--- a/py/h2o_lightwave/h2o_lightwave/ui.py
+++ b/py/h2o_lightwave/h2o_lightwave/ui.py
@@ -398,7 +398,7 @@ def textbox(
         visible: Optional[bool] = None,
         tooltip: Optional[str] = None,
         spellcheck: Optional[bool] = None,
-        keyboard: Optional[str] = None,
+        type: Optional[str] = None,
 ) -> Component:
     """Create a text box.
 
@@ -427,7 +427,7 @@ def textbox(
         visible: True if the component should be visible. Defaults to True.
         tooltip: An optional tooltip message displayed when a user clicks the help icon to the right of the component.
         spellcheck: True if the text may be checked for spelling errors. Defaults to True.
-        keyboard: Keyboard to be shown on mobile devices. Defaults to 'text'. One of 'text', 'number', 'tel'. See enum h2o_wave.ui.TextboxKeyboard.
+        type: Keyboard to be shown on mobile devices. Defaults to 'text'. One of 'text', 'number', 'tel'. See enum h2o_wave.ui.TextboxType.
     Returns:
         A `h2o_wave.types.Textbox` instance.
     """
@@ -452,7 +452,7 @@ def textbox(
         visible,
         tooltip,
         spellcheck,
-        keyboard,
+        type,
     ))
 
 
diff --git a/py/h2o_wave/h2o_wave/types.py b/py/h2o_wave/h2o_wave/types.py
index c741d59868..80f892cd71 100644
--- a/py/h2o_wave/h2o_wave/types.py
+++ b/py/h2o_wave/h2o_wave/types.py
@@ -969,10 +969,10 @@ def load(__d: Dict) -> 'MessageBar':
         )
 
 
-_TextboxKeyboard = ['text', 'number', 'tel']
+_TextboxType = ['text', 'number', 'tel']
 
 
-class TextboxKeyboard:
+class TextboxType:
     TEXT = 'text'
     NUMBER = 'number'
     TEL = 'tel'
@@ -1007,7 +1007,7 @@ def __init__(
             visible: Optional[bool] = None,
             tooltip: Optional[str] = None,
             spellcheck: Optional[bool] = None,
-            keyboard: Optional[str] = None,
+            type: Optional[str] = None,
     ):
         _guard_scalar('Textbox.name', name, (str,), True, False, False)
         _guard_scalar('Textbox.label', label, (str,), False, True, False)
@@ -1029,7 +1029,7 @@ def __init__(
         _guard_scalar('Textbox.visible', visible, (bool,), False, True, False)
         _guard_scalar('Textbox.tooltip', tooltip, (str,), False, True, False)
         _guard_scalar('Textbox.spellcheck', spellcheck, (bool,), False, True, False)
-        _guard_enum('Textbox.keyboard', keyboard, _TextboxKeyboard, True)
+        _guard_enum('Textbox.type', type, _TextboxType, True)
         self.name = name
         """An identifying name for this component."""
         self.label = label
@@ -1070,8 +1070,8 @@ def __init__(
         """An optional tooltip message displayed when a user clicks the help icon to the right of the component."""
         self.spellcheck = spellcheck
         """True if the text may be checked for spelling errors. Defaults to True."""
-        self.keyboard = keyboard
-        """Keyboard to be shown on mobile devices. Defaults to 'text'. One of 'text', 'number', 'tel'. See enum h2o_wave.ui.TextboxKeyboard."""
+        self.type = type
+        """Keyboard to be shown on mobile devices. Defaults to 'text'. One of 'text', 'number', 'tel'. See enum h2o_wave.ui.TextboxType."""
 
     def dump(self) -> Dict:
         """Returns the contents of this object as a dict."""
@@ -1095,7 +1095,7 @@ def dump(self) -> Dict:
         _guard_scalar('Textbox.visible', self.visible, (bool,), False, True, False)
         _guard_scalar('Textbox.tooltip', self.tooltip, (str,), False, True, False)
         _guard_scalar('Textbox.spellcheck', self.spellcheck, (bool,), False, True, False)
-        _guard_enum('Textbox.keyboard', self.keyboard, _TextboxKeyboard, True)
+        _guard_enum('Textbox.type', self.type, _TextboxType, True)
         return _dump(
             name=self.name,
             label=self.label,
@@ -1117,7 +1117,7 @@ def dump(self) -> Dict:
             visible=self.visible,
             tooltip=self.tooltip,
             spellcheck=self.spellcheck,
-            keyboard=self.keyboard,
+            type=self.type,
         )
 
     @staticmethod
@@ -1163,8 +1163,8 @@ def load(__d: Dict) -> 'Textbox':
         _guard_scalar('Textbox.tooltip', __d_tooltip, (str,), False, True, False)
         __d_spellcheck: Any = __d.get('spellcheck')
         _guard_scalar('Textbox.spellcheck', __d_spellcheck, (bool,), False, True, False)
-        __d_keyboard: Any = __d.get('keyboard')
-        _guard_enum('Textbox.keyboard', __d_keyboard, _TextboxKeyboard, True)
+        __d_type: Any = __d.get('type')
+        _guard_enum('Textbox.type', __d_type, _TextboxType, True)
         name: str = __d_name
         label: Optional[str] = __d_label
         placeholder: Optional[str] = __d_placeholder
@@ -1185,7 +1185,7 @@ def load(__d: Dict) -> 'Textbox':
         visible: Optional[bool] = __d_visible
         tooltip: Optional[str] = __d_tooltip
         spellcheck: Optional[bool] = __d_spellcheck
-        keyboard: Optional[str] = __d_keyboard
+        type: Optional[str] = __d_type
         return Textbox(
             name,
             label,
@@ -1207,7 +1207,7 @@ def load(__d: Dict) -> 'Textbox':
             visible,
             tooltip,
             spellcheck,
-            keyboard,
+            type,
         )
 
 
diff --git a/py/h2o_wave/h2o_wave/ui.py b/py/h2o_wave/h2o_wave/ui.py
index 75e63e3d41..13c88404c2 100644
--- a/py/h2o_wave/h2o_wave/ui.py
+++ b/py/h2o_wave/h2o_wave/ui.py
@@ -398,7 +398,7 @@ def textbox(
         visible: Optional[bool] = None,
         tooltip: Optional[str] = None,
         spellcheck: Optional[bool] = None,
-        keyboard: Optional[str] = None,
+        type: Optional[str] = None,
 ) -> Component:
     """Create a text box.
 
@@ -427,7 +427,7 @@ def textbox(
         visible: True if the component should be visible. Defaults to True.
         tooltip: An optional tooltip message displayed when a user clicks the help icon to the right of the component.
         spellcheck: True if the text may be checked for spelling errors. Defaults to True.
-        keyboard: Keyboard to be shown on mobile devices. Defaults to 'text'. One of 'text', 'number', 'tel'. See enum h2o_wave.ui.TextboxKeyboard.
+        type: Keyboard to be shown on mobile devices. Defaults to 'text'. One of 'text', 'number', 'tel'. See enum h2o_wave.ui.TextboxType.
     Returns:
         A `h2o_wave.types.Textbox` instance.
     """
@@ -452,7 +452,7 @@ def textbox(
         visible,
         tooltip,
         spellcheck,
-        keyboard,
+        type,
     ))
 
 
diff --git a/r/R/ui.R b/r/R/ui.R
index e21f90c70b..a5f9a1e518 100644
--- a/r/R/ui.R
+++ b/r/R/ui.R
@@ -485,8 +485,8 @@ ui_message_bar <- function(
 #' @param visible True if the component should be visible. Defaults to True.
 #' @param tooltip An optional tooltip message displayed when a user clicks the help icon to the right of the component.
 #' @param spellcheck True if the text may be checked for spelling errors. Defaults to True.
-#' @param keyboard Keyboard to be shown on mobile devices. Defaults to 'text'.
-#'   One of 'text', 'number', 'tel'. See enum h2o_wave.ui.TextboxKeyboard.
+#' @param type Keyboard to be shown on mobile devices. Defaults to 'text'.
+#'   One of 'text', 'number', 'tel'. See enum h2o_wave.ui.TextboxType.
 #' @return A Textbox instance.
 #' @export
 ui_textbox <- function(
@@ -510,7 +510,7 @@ ui_textbox <- function(
   visible = NULL,
   tooltip = NULL,
   spellcheck = NULL,
-  keyboard = NULL) {
+  type = NULL) {
   .guard_scalar("name", "character", name)
   .guard_scalar("label", "character", label)
   .guard_scalar("placeholder", "character", placeholder)
@@ -531,7 +531,7 @@ ui_textbox <- function(
   .guard_scalar("visible", "logical", visible)
   .guard_scalar("tooltip", "character", tooltip)
   .guard_scalar("spellcheck", "logical", spellcheck)
-  # TODO Validate keyboard
+  # TODO Validate type
   .o <- list(textbox=list(
     name=name,
     label=label,
@@ -553,7 +553,7 @@ ui_textbox <- function(
     visible=visible,
     tooltip=tooltip,
     spellcheck=spellcheck,
-    keyboard=keyboard))
+    type=type))
   class(.o) <- append(class(.o), c(.wave_obj, "WaveComponent"))
   return(.o)
 }
diff --git a/tools/intellij-plugin/src/main/resources/templates/wave-components.xml b/tools/intellij-plugin/src/main/resources/templates/wave-components.xml
index 42a0201dee..cbd7a92848 100644
--- a/tools/intellij-plugin/src/main/resources/templates/wave-components.xml
+++ b/tools/intellij-plugin/src/main/resources/templates/wave-components.xml
@@ -2620,7 +2620,7 @@
       <option name="Python" value="true"/>
     </context>
   </template>
-  <template name="w_full_textbox" value="ui.textbox(name='$name$',label='$label$',placeholder='$placeholder$',value='$value$',mask='$mask$',icon='$icon$',prefix='$prefix$',suffix='$suffix$',error='$error$',required=$required$,disabled=$disabled$,readonly=$readonly$,multiline=$multiline$,password=$password$,trigger=$trigger$,height='$height$',width='$width$',visible=$visible$,tooltip='$tooltip$',spellcheck=$spellcheck$,keyboard='$keyboard$'),$END$" description="Create Wave Textbox with full attributes." toReformat="true" toShortenFQNames="true">
+  <template name="w_full_textbox" value="ui.textbox(name='$name$',label='$label$',placeholder='$placeholder$',value='$value$',mask='$mask$',icon='$icon$',prefix='$prefix$',suffix='$suffix$',error='$error$',required=$required$,disabled=$disabled$,readonly=$readonly$,multiline=$multiline$,password=$password$,trigger=$trigger$,height='$height$',width='$width$',visible=$visible$,tooltip='$tooltip$',spellcheck=$spellcheck$,type='$type$'),$END$" description="Create Wave Textbox with full attributes." toReformat="true" toShortenFQNames="true">
     <variable name="name" expression="" defaultValue="" alwaysStopAt="true"/>
     <variable name="label" expression="" defaultValue="" alwaysStopAt="true"/>
     <variable name="placeholder" expression="" defaultValue="" alwaysStopAt="true"/>
@@ -2641,7 +2641,7 @@
     <variable name="visible" expression="" defaultValue="&quot;True&quot;" alwaysStopAt="true"/>
     <variable name="tooltip" expression="" defaultValue="" alwaysStopAt="true"/>
     <variable name="spellcheck" expression="" defaultValue="&quot;True&quot;" alwaysStopAt="true"/>
-    <variable name="keyboard" expression="" defaultValue="&quot;text&quot;" alwaysStopAt="true"/>
+    <variable name="type" expression="" defaultValue="&quot;text&quot;" alwaysStopAt="true"/>
     <context>
       <option name="Python" value="true"/>
     </context>
diff --git a/tools/vscode-extension/component-snippets.json b/tools/vscode-extension/component-snippets.json
index 844e639e3c..0d868dbd38 100644
--- a/tools/vscode-extension/component-snippets.json
+++ b/tools/vscode-extension/component-snippets.json
@@ -1906,7 +1906,7 @@
   "Wave Full Textbox": {
     "prefix": "w_full_textbox",
     "body": [
-      "ui.textbox(name='$1', label='$2', placeholder='$3', value='$4', mask='$5', icon='$6', prefix='$7', suffix='$8', error='$9', required=${10:False}, disabled=${11:False}, readonly=${12:False}, multiline=${13:False}, password=${14:False}, trigger=${15:False}, height='$16', width='${17:100%}', visible=${18:True}, tooltip='$19', spellcheck=${20:True}, keyboard='${21:text}'),$0"
+      "ui.textbox(name='$1', label='$2', placeholder='$3', value='$4', mask='$5', icon='$6', prefix='$7', suffix='$8', error='$9', required=${10:False}, disabled=${11:False}, readonly=${12:False}, multiline=${13:False}, password=${14:False}, trigger=${15:False}, height='$16', width='${17:100%}', visible=${18:True}, tooltip='$19', spellcheck=${20:True}, type='${21:text}'),$0"
     ],
     "description": "Create a full Wave Textbox."
   },
diff --git a/ui/src/textbox.tsx b/ui/src/textbox.tsx
index 8bacc55e8c..abd11f0ddd 100644
--- a/ui/src/textbox.tsx
+++ b/ui/src/textbox.tsx
@@ -17,13 +17,6 @@ import { B, Id, S } from './core'
 import React from 'react'
 import { debounce, wave } from './ui'
 
-const hideFieldArrowsStyle = {
-  '&::-webkit-outer-spin-button, &::-webkit-inner-spin-button': {
-    '-webkit-appearance': 'none',
-    margin: 0,
-  },
-  '-moz-appearance': 'textfield',
-}
 
 /**
  * Create a text box.
@@ -74,7 +67,7 @@ export interface Textbox {
   /** True if the text may be checked for spelling errors. Defaults to True. */
   spellcheck?: B
   /** Keyboard to be shown on mobile devices. Defaults to 'text'. */
-  keyboard?: 'text' | 'number' | 'tel'
+  type?: 'text' | 'number' | 'tel'
 }
 
 const DEBOUNCE_TIMEOUT = 500
@@ -91,11 +84,6 @@ export const
         setValue(v)
         m.value = v
       },
-      customHeight = !m.mask && m.multiline && m.height && !m.height.endsWith('%') ? m.height : undefined,
-      styles = {
-        field: { height: customHeight, ...(m.keyboard === 'number' ? hideFieldArrowsStyle : {}) },
-        fieldGroup: { minHeight: customHeight },
-      },
       textFieldProps: Fluent.ITextFieldProps & { 'data-test': S } = {
         'data-test': m.name,
         label: m.label,
@@ -112,9 +100,6 @@ export const
         multiline: m.multiline,
         spellCheck: m.spellcheck,
         type: m.password ? 'password' : (m.keyboard || 'text'),
-        styles,
-        onWheel: m.keyboard === 'number' ? e => e.currentTarget.blur() : undefined, // Disable setting number with scroll.
-        onKeyDown: m.keyboard === 'number' ? e => e.preventDefault() : undefined, // Disable setting number with keyboard arrows.
       }
 
     React.useEffect(() => {
@@ -124,5 +109,14 @@ export const
 
     return m.mask
       ? <Fluent.MaskedTextField mask={m.mask} {...textFieldProps} />
-      : <Fluent.TextField {...textFieldProps} />
+      : (
+        <Fluent.TextField
+          styles={
+            m.multiline && m.height && !m.height.endsWith('%')
+              ? { field: { height: m.height }, fieldGroup: { minHeight: m.height } }
+              : undefined
+          }
+          {...textFieldProps}
+        />
+      )
   }
\ No newline at end of file
diff --git a/website/widgets/form/textbox.md b/website/widgets/form/textbox.md
index 4590bfbc3b..ef161e0f80 100644
--- a/website/widgets/form/textbox.md
+++ b/website/widgets/form/textbox.md
@@ -151,13 +151,13 @@ q.page['example'] = ui.form_card(
             name='textbox_keyboard_numeric', 
             label='With numeric keyboard (iOS, Android)',
             # Show numeric keyboard
-            keyboard='number'
+            type='number'
             ),
         ui.textbox(
             name='textbox_keyboard_telephone', 
             label='With numeric keyboard (iOS, Android)',
             # Show telephone keyboard
-            keyboard='tel'
+            type='tel'
             )
         ]
 )

From 6007fac7b3394c0e63ea77428326afc5e90806f0 Mon Sep 17 00:00:00 2001
From: Marek Mihok <marek.mihok@h2o.ai>
Date: Thu, 16 Nov 2023 12:10:02 +0100
Subject: [PATCH 6/8] chore: update docs #2170

---
 ui/src/textbox.tsx              | 2 +-
 website/widgets/form/textbox.md | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/ui/src/textbox.tsx b/ui/src/textbox.tsx
index abd11f0ddd..4359f49731 100644
--- a/ui/src/textbox.tsx
+++ b/ui/src/textbox.tsx
@@ -99,7 +99,7 @@ export const
         suffix: m.suffix,
         multiline: m.multiline,
         spellCheck: m.spellcheck,
-        type: m.password ? 'password' : (m.keyboard || 'text'),
+        type: m.password ? 'password' : (m.type || 'text'),
       }
 
     React.useEffect(() => {
diff --git a/website/widgets/form/textbox.md b/website/widgets/form/textbox.md
index ef161e0f80..29c3e841b4 100644
--- a/website/widgets/form/textbox.md
+++ b/website/widgets/form/textbox.md
@@ -140,8 +140,8 @@ q.page['example'] = ui.form_card(
 
 ## Mobile keyboard layout
 
-Show proper keyboard layout on mobile devices with `keyboard` attribute. Defaults to `text`.
-This does not prevent user from typing any character. If you want to allow typing e.g. numeric characters only, use in combination with [mask](#with-mask).
+Show proper keyboard layout on mobile devices with `type` attribute. Defaults to `text`.
+This does not prevent user from typing any character.
 
 ```py
 q.page['example'] = ui.form_card(
@@ -155,7 +155,7 @@ q.page['example'] = ui.form_card(
             ),
         ui.textbox(
             name='textbox_keyboard_telephone', 
-            label='With numeric keyboard (iOS, Android)',
+            label='With numeric keyboard  (iOS, Android)',
             # Show telephone keyboard
             type='tel'
             )

From 9be79c948d6dd3815c6b5a86b4b7698ba2561788 Mon Sep 17 00:00:00 2001
From: Marek Mihok <marek.mihok@h2o.ai>
Date: Thu, 16 Nov 2023 12:14:33 +0100
Subject: [PATCH 7/8] chore: clear diff #2170

---
 ui/src/textbox.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/ui/src/textbox.tsx b/ui/src/textbox.tsx
index 4359f49731..259e5adc02 100644
--- a/ui/src/textbox.tsx
+++ b/ui/src/textbox.tsx
@@ -17,7 +17,6 @@ import { B, Id, S } from './core'
 import React from 'react'
 import { debounce, wave } from './ui'
 
-
 /**
  * Create a text box.
  *

From 80eb02af8c95d24874878742428344900e80abfe Mon Sep 17 00:00:00 2001
From: Marek Mihok <marek.mihok@h2o.ai>
Date: Thu, 16 Nov 2023 13:36:59 +0100
Subject: [PATCH 8/8] chore: clear diff - add EOL into index.scss #2170

---
 ui/src/index.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ui/src/index.scss b/ui/src/index.scss
index d11b18b044..9186970982 100644
--- a/ui/src/index.scss
+++ b/ui/src/index.scss
@@ -246,4 +246,4 @@ $tracking in $fontTrackings {
   to {
     opacity: 1;
   }
-}
+}
\ No newline at end of file