diff --git a/angular/src/directives/proxies.ts b/angular/src/directives/proxies.ts
index f0fef6c7486..aafd100525b 100644
--- a/angular/src/directives/proxies.ts
+++ b/angular/src/directives/proxies.ts
@@ -676,7 +676,7 @@ export class IonRow {
}
export declare interface IonSearchbar extends Components.IonSearchbar {}
-@Component({ selector: 'ion-searchbar', changeDetection: ChangeDetectionStrategy.OnPush, template: '', inputs: ['animated', 'autocomplete', 'autocorrect', 'cancelButtonIcon', 'cancelButtonText', 'clearIcon', 'color', 'debounce', 'disabled', 'mode', 'placeholder', 'searchIcon', 'showCancelButton', 'spellcheck', 'type', 'value'] })
+@Component({ selector: 'ion-searchbar', changeDetection: ChangeDetectionStrategy.OnPush, template: '', inputs: ['animated', 'autocomplete', 'autocorrect', 'cancelButtonIcon', 'cancelButtonText', 'clearIcon', 'color', 'debounce', 'disabled', 'inputmode', 'mode', 'placeholder', 'searchIcon', 'showCancelButton', 'spellcheck', 'type', 'value'] })
export class IonSearchbar {
ionInput!: EventEmitter;
ionChange!: EventEmitter;
@@ -692,7 +692,7 @@ export class IonSearchbar {
}
}
proxyMethods(IonSearchbar, ['setFocus', 'getInputElement']);
-proxyInputs(IonSearchbar, ['animated', 'autocomplete', 'autocorrect', 'cancelButtonIcon', 'cancelButtonText', 'clearIcon', 'color', 'debounce', 'disabled', 'mode', 'placeholder', 'searchIcon', 'showCancelButton', 'spellcheck', 'type', 'value']);
+proxyInputs(IonSearchbar, ['animated', 'autocomplete', 'autocorrect', 'cancelButtonIcon', 'cancelButtonText', 'clearIcon', 'color', 'debounce', 'disabled', 'inputmode', 'mode', 'placeholder', 'searchIcon', 'showCancelButton', 'spellcheck', 'type', 'value']);
export declare interface IonSegment extends Components.IonSegment {}
@Component({ selector: 'ion-segment', changeDetection: ChangeDetectionStrategy.OnPush, template: '', inputs: ['color', 'disabled', 'mode', 'scrollable', 'value'] })
diff --git a/core/api.txt b/core/api.txt
index c056c9383cf..d23334bb6b2 100644
--- a/core/api.txt
+++ b/core/api.txt
@@ -951,6 +951,7 @@ ion-searchbar,prop,clearIcon,string | undefined,undefined,false,false
ion-searchbar,prop,color,string | undefined,undefined,false,false
ion-searchbar,prop,debounce,number,250,false,false
ion-searchbar,prop,disabled,boolean,false,false,false
+ion-searchbar,prop,inputmode,"decimal" | "email" | "none" | "numeric" | "search" | "tel" | "text" | "url",'search',false,false
ion-searchbar,prop,mode,"ios" | "md",undefined,false,false
ion-searchbar,prop,placeholder,string,'Search',false,false
ion-searchbar,prop,searchIcon,string,'search',false,false
diff --git a/core/src/components.d.ts b/core/src/components.d.ts
index fbd8db1c06a..ea2fcf76549 100644
--- a/core/src/components.d.ts
+++ b/core/src/components.d.ts
@@ -2182,6 +2182,10 @@ export namespace Components {
*/
'getInputElement': () => Promise;
/**
+ * A hint to the browser for which keyboard to display. Possible values are: `"none"` | `"text"` | `"tel"` | `"url"` | `"email"` | `"numeric"` | `"decimal"` | `"search"`.
+ */
+ 'inputmode': 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search';
+ /**
* The mode determines which platform styles to use.
*/
'mode'?: "ios" | "md";
@@ -5440,6 +5444,10 @@ declare namespace LocalJSX {
*/
'disabled'?: boolean;
/**
+ * A hint to the browser for which keyboard to display. Possible values are: `"none"` | `"text"` | `"tel"` | `"url"` | `"email"` | `"numeric"` | `"decimal"` | `"search"`.
+ */
+ 'inputmode'?: 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search';
+ /**
* The mode determines which platform styles to use.
*/
'mode'?: "ios" | "md";
diff --git a/core/src/components/searchbar/readme.md b/core/src/components/searchbar/readme.md
index d6ceaa879b8..b1c93457102 100644
--- a/core/src/components/searchbar/readme.md
+++ b/core/src/components/searchbar/readme.md
@@ -35,6 +35,9 @@ A Searchbar should be used instead of an input to search lists. A clear button i
+
+
+
@@ -81,6 +84,9 @@ A Searchbar should be used instead of an input to search lists. A clear button i
+
+
+
@@ -113,13 +119,13 @@ export const SearchbarExample: React.FunctionComponent = () => (
{/*-- Default Searchbar --*/}
-
+
{/*-- Searchbar with cancel button always shown --*/}
-
+
{/*-- Searchbar with cancel button never shown --*/}
-
+
{/*-- Searchbar with cancel button shown on focus --*/}
@@ -132,6 +138,9 @@ export const SearchbarExample: React.FunctionComponent = () => (
{/*-- Searchbar with telephone type --*/}
+ {/*-- Searchbar with numeric inputmode --*/}
+
+
{/*-- Searchbar disabled --*/}
@@ -181,6 +190,9 @@ export const SearchbarExample: React.FunctionComponent = () => (
+
+
+
@@ -207,24 +219,25 @@ export const SearchbarExample: React.FunctionComponent = () => (
## Properties
-| Property | Attribute | Description | Type | Default |
-| ------------------ | -------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------- | ----------------- |
-| `animated` | `animated` | If `true`, enable searchbar animation. | `boolean` | `false` |
-| `autocomplete` | `autocomplete` | Set the input's autocomplete property. | `"off" \| "on"` | `'off'` |
-| `autocorrect` | `autocorrect` | Set the input's autocorrect property. | `"off" \| "on"` | `'off'` |
-| `cancelButtonIcon` | `cancel-button-icon` | Set the cancel button icon. Only applies to `md` mode. | `string` | `'md-arrow-back'` |
-| `cancelButtonText` | `cancel-button-text` | Set the the cancel button text. Only applies to `ios` mode. | `string` | `'Cancel'` |
-| `clearIcon` | `clear-icon` | Set the clear icon. Defaults to `"close-circle"` for `ios` and `"close"` for `md`. | `string \| undefined` | `undefined` |
-| `color` | `color` | The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). | `string \| undefined` | `undefined` |
-| `debounce` | `debounce` | Set the amount of time, in milliseconds, to wait to trigger the `ionChange` event after each keystroke. | `number` | `250` |
-| `disabled` | `disabled` | If `true`, the user cannot interact with the input. | `boolean` | `false` |
-| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` |
-| `placeholder` | `placeholder` | Set the input's placeholder. `placeholder` can accept either plaintext or HTML as a string. To display characters normally reserved for HTML, they must be escaped. For example `` would become `<Ionic>` For more information: [Security Documentation](https://ionicframework.com/docs/faq/security) | `string` | `'Search'` |
-| `searchIcon` | `search-icon` | The icon to use as the search icon. | `string` | `'search'` |
-| `showCancelButton` | `show-cancel-button` | Sets the behavior for the cancel button. Defaults to `"never"`. Setting to `"focus"` shows the cancel button on focus. Setting to `"never"` hides the cancel button. Setting to `"always"` shows the cancel button regardless of focus state. | `boolean \| string` | `'never'` |
-| `spellcheck` | `spellcheck` | If `true`, enable spellcheck on the input. | `boolean` | `false` |
-| `type` | `type` | Set the type of the input. | `"email" \| "number" \| "password" \| "search" \| "tel" \| "text" \| "url"` | `'search'` |
-| `value` | `value` | the value of the searchbar. | `null \| string \| undefined` | `''` |
+| Property | Attribute | Description | Type | Default |
+| ------------------ | -------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------- | ----------------- |
+| `animated` | `animated` | If `true`, enable searchbar animation. | `boolean` | `false` |
+| `autocomplete` | `autocomplete` | Set the input's autocomplete property. | `"off" \| "on"` | `'off'` |
+| `autocorrect` | `autocorrect` | Set the input's autocorrect property. | `"off" \| "on"` | `'off'` |
+| `cancelButtonIcon` | `cancel-button-icon` | Set the cancel button icon. Only applies to `md` mode. | `string` | `'md-arrow-back'` |
+| `cancelButtonText` | `cancel-button-text` | Set the the cancel button text. Only applies to `ios` mode. | `string` | `'Cancel'` |
+| `clearIcon` | `clear-icon` | Set the clear icon. Defaults to `"close-circle"` for `ios` and `"close"` for `md`. | `string \| undefined` | `undefined` |
+| `color` | `color` | The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). | `string \| undefined` | `undefined` |
+| `debounce` | `debounce` | Set the amount of time, in milliseconds, to wait to trigger the `ionChange` event after each keystroke. | `number` | `250` |
+| `disabled` | `disabled` | If `true`, the user cannot interact with the input. | `boolean` | `false` |
+| `inputmode` | `inputmode` | A hint to the browser for which keyboard to display. Possible values are: `"none"` \| `"text"` \| `"tel"` \| `"url"` \| `"email"` \| `"numeric"` \| `"decimal"` \| `"search"`. | `"decimal" \| "email" \| "none" \| "numeric" \| "search" \| "tel" \| "text" \| "url"` | `'search'` |
+| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` |
+| `placeholder` | `placeholder` | Set the input's placeholder. `placeholder` can accept either plaintext or HTML as a string. To display characters normally reserved for HTML, they must be escaped. For example `` would become `<Ionic>` For more information: [Security Documentation](https://ionicframework.com/docs/faq/security) | `string` | `'Search'` |
+| `searchIcon` | `search-icon` | The icon to use as the search icon. | `string` | `'search'` |
+| `showCancelButton` | `show-cancel-button` | Sets the behavior for the cancel button. Defaults to `"never"`. Setting to `"focus"` shows the cancel button on focus. Setting to `"never"` hides the cancel button. Setting to `"always"` shows the cancel button regardless of focus state. | `boolean \| string` | `'never'` |
+| `spellcheck` | `spellcheck` | If `true`, enable spellcheck on the input. | `boolean` | `false` |
+| `type` | `type` | Set the type of the input. | `"email" \| "number" \| "password" \| "search" \| "tel" \| "text" \| "url"` | `'search'` |
+| `value` | `value` | the value of the searchbar. | `null \| string \| undefined` | `''` |
## Events
diff --git a/core/src/components/searchbar/searchbar.tsx b/core/src/components/searchbar/searchbar.tsx
index bc11190ce9d..88347ccdcf3 100644
--- a/core/src/components/searchbar/searchbar.tsx
+++ b/core/src/components/searchbar/searchbar.tsx
@@ -81,6 +81,12 @@ export class Searchbar implements ComponentInterface {
*/
@Prop() disabled = false;
+ /**
+ * A hint to the browser for which keyboard to display.
+ * Possible values are: `"none"` | `"text"` | `"tel"` | `"url"` | `"email"` | `"numeric"` | `"decimal"` | `"search"`.
+ */
+ @Prop() inputmode: 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search' = 'search';
+
/**
* Set the input's placeholder.
* `placeholder` can accept either plaintext or HTML as a string.
@@ -442,6 +448,7 @@ export class Searchbar implements ComponentInterface {
disabled={this.disabled}
ref={el => this.nativeInput = el}
class="searchbar-input"
+ inputMode={this.inputmode}
onInput={this.onInput}
onBlur={this.onBlur}
onFocus={this.onFocus}
diff --git a/core/src/components/searchbar/test/basic/index.html b/core/src/components/searchbar/test/basic/index.html
index d53b8762203..6e28d4da4c1 100644
--- a/core/src/components/searchbar/test/basic/index.html
+++ b/core/src/components/searchbar/test/basic/index.html
@@ -49,6 +49,10 @@ Search - Cancel Button set to tru
+ Search - Input mode set to numeric
+
+
+
Search - Disabled
diff --git a/core/src/components/searchbar/usage/angular.md b/core/src/components/searchbar/usage/angular.md
index affa8ea62f4..ad21974e6c4 100644
--- a/core/src/components/searchbar/usage/angular.md
+++ b/core/src/components/searchbar/usage/angular.md
@@ -20,6 +20,9 @@
+
+
+
diff --git a/core/src/components/searchbar/usage/javascript.md b/core/src/components/searchbar/usage/javascript.md
index 55bb95036a1..e7760c5597b 100644
--- a/core/src/components/searchbar/usage/javascript.md
+++ b/core/src/components/searchbar/usage/javascript.md
@@ -20,6 +20,9 @@
+
+
+
diff --git a/core/src/components/searchbar/usage/react.md b/core/src/components/searchbar/usage/react.md
index 278c2e55e35..b792bb9361b 100644
--- a/core/src/components/searchbar/usage/react.md
+++ b/core/src/components/searchbar/usage/react.md
@@ -6,13 +6,13 @@ export const SearchbarExample: React.FunctionComponent = () => (
{/*-- Default Searchbar --*/}
-
+
{/*-- Searchbar with cancel button always shown --*/}
-
+
{/*-- Searchbar with cancel button never shown --*/}
-
+
{/*-- Searchbar with cancel button shown on focus --*/}
@@ -25,6 +25,9 @@ export const SearchbarExample: React.FunctionComponent = () => (
{/*-- Searchbar with telephone type --*/}
+ {/*-- Searchbar with numeric inputmode --*/}
+
+
{/*-- Searchbar disabled --*/}
diff --git a/core/src/components/searchbar/usage/vue.md b/core/src/components/searchbar/usage/vue.md
index d74e5f97283..2f5929b5499 100644
--- a/core/src/components/searchbar/usage/vue.md
+++ b/core/src/components/searchbar/usage/vue.md
@@ -21,6 +21,9 @@
+
+
+