feat(searchbar): add inputmode property (#18980)

Author: 5im0n

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: '<ng-content></ng-content>', 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: '<ng-content></ng-content>', inputs: ['animated', 'autocomplete', 'autocorrect', 'cancelButtonIcon', 'cancelButtonText', 'clearIcon', 'color', 'debounce', 'disabled', 'inputmode', 'mode', 'placeholder', 'searchIcon', 'showCancelButton', 'spellcheck', 'type', 'value'] })
 export class IonSearchbar {
   ionInput!: EventEmitter<CustomEvent>;
   ionChange!: EventEmitter<CustomEvent>;
@@ -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: '<ng-content></ng-content>', inputs: ['color', 'disabled', 'mode', 'scrollable', 'value'] })

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

core/src/components.d.ts

@@ -2182,6 +2182,10 @@ export namespace Components {
     */
     'getInputElement': () => Promise<HTMLInputElement>;
     /**
+    * 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";

core/src/components/searchbar/readme.md

@@ -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}

core/src/components/searchbar/searchbar.tsx

@@ -49,6 +49,10 @@ <h5 class="ion-padding-start ion-padding-top"> Search - Cancel Button set to tru
       <ion-searchbar id="noCancel" value="after view" autocorrect="off" autocomplete="off" spellcheck="true" type="text" show-cancel-button="focus">
       </ion-searchbar>
 
+      <h5 class="ion-padding-start ion-padding-top"> Search - Input mode set to numeric</h5>
+      <ion-searchbar id="noCancel" value="after view" inputmode="numeric" autocorrect="off" autocomplete="off" spellcheck="true" type="text" show-cancel-button="focus">
+      </ion-searchbar>
+
       <h5 class="ion-padding-start ion-padding-top"> Search - Disabled </h5>
       <ion-searchbar id="disabled" value="disabled" type="text" disabled="true">
       </ion-searchbar>

core/src/components/searchbar/test/basic/index.html

@@ -20,6 +20,9 @@
 <!-- Searchbar with telephone type -->
 <ion-searchbar type="tel"></ion-searchbar>
 
+<!-- Searchbar with numeric inputmode -->
+<ion-searchbar inputmode="numeric"></ion-searchbar>
+
 <!-- Searchbar disabled -->
 <ion-searchbar disabled="true"></ion-searchbar>
 

core/src/components/searchbar/usage/angular.md

@@ -20,6 +20,9 @@
 <!-- Searchbar with telephone type -->
 <ion-searchbar type="tel"></ion-searchbar>
 
+<!-- Searchbar with numeric inputmode -->
+<ion-searchbar inputmode="numeric"></ion-searchbar>
+
 <!-- Searchbar disabled -->
 <ion-searchbar disabled="true"></ion-searchbar>
 

core/src/components/searchbar/usage/javascript.md

@@ -6,13 +6,13 @@ export const SearchbarExample: React.FunctionComponent = () => (
   <IonContent>
     {/*-- Default Searchbar --*/}
     <IonSearchbar></IonSearchbar>
-    
+
     {/*-- Searchbar with cancel button always shown --*/}
     <IonSearchbar showCancelButton="always"></IonSearchbar>
-    
+
     {/*-- Searchbar with cancel button never shown --*/}
     <IonSearchbar showCancelButton="never"></IonSearchbar>
-    
+
     {/*-- Searchbar with cancel button shown on focus --*/}
     <IonSearchbar showCancelButton="focus"></IonSearchbar>
 
@@ -25,6 +25,9 @@ export const SearchbarExample: React.FunctionComponent = () => (
     {/*-- Searchbar with telephone type --*/}
     <IonSearchbar type="tel"></IonSearchbar>
 
+    {/*-- Searchbar with numeric inputmode --*/}
+    <IonSearchbar inputmode="numeric"></IonSearchbar>
+
     {/*-- Searchbar disabled  --*/}
     <IonSearchbar disabled={true}></IonSearchbar>
 

core/src/components/searchbar/usage/react.md

@@ -21,6 +21,9 @@
   <!-- Searchbar with telephone type -->
   <ion-searchbar type="tel"></ion-searchbar>
 
+  <!-- Searchbar with numeric inputmode -->
+  <ion-searchbar inputmode="numeric"></ion-searchbar>
+
   <!-- Searchbar disabled -->
   <ion-searchbar disabled="true"></ion-searchbar>