feat(searchbar): add disabled attribute

angular/src/directives/proxies.ts

@@ -675,7 +675,7 @@ export class IonRow {
 }
 
 export declare interface IonSearchbar extends StencilComponents<'IonSearchbar'> {}
-@Component({ selector: 'ion-searchbar', changeDetection: 0, template: '<ng-content></ng-content>', inputs: ['color', 'mode', 'animated', 'autocomplete', 'autocorrect', 'cancelButtonIcon', 'cancelButtonText', 'clearIcon', 'debounce', 'placeholder', 'searchIcon', 'showCancelButton', 'spellcheck', 'type', 'value'] })
+@Component({ selector: 'ion-searchbar', changeDetection: 0, template: '<ng-content></ng-content>', inputs: ['color', 'mode', 'animated', 'autocomplete', 'autocorrect', 'cancelButtonIcon', 'cancelButtonText', 'clearIcon', 'debounce', 'disabled', 'placeholder', 'searchIcon', 'showCancelButton', 'spellcheck', 'type', 'value'] })
 export class IonSearchbar {
   ionInput!: EventEmitter<CustomEvent>;
   ionChange!: EventEmitter<CustomEvent>;
@@ -691,7 +691,7 @@ export class IonSearchbar {
   }
 }
 proxyMethods(IonSearchbar, ['setFocus', 'getInputElement']);
-proxyInputs(IonSearchbar, ['color', 'mode', 'animated', 'autocomplete', 'autocorrect', 'cancelButtonIcon', 'cancelButtonText', 'clearIcon', 'debounce', 'placeholder', 'searchIcon', 'showCancelButton', 'spellcheck', 'type', 'value']);
+proxyInputs(IonSearchbar, ['color', 'mode', 'animated', 'autocomplete', 'autocorrect', 'cancelButtonIcon', 'cancelButtonText', 'clearIcon', 'debounce', 'disabled', 'placeholder', 'searchIcon', 'showCancelButton', 'spellcheck', 'type', 'value']);
 
 export declare interface IonSegment extends StencilComponents<'IonSegment'> {}
 @Component({ selector: 'ion-segment', changeDetection: 0, template: '<ng-content></ng-content>', inputs: ['color', 'mode', 'disabled', 'scrollable', 'value'] })

core/api.txt

@@ -885,6 +885,7 @@ ion-searchbar,prop,cancelButtonText,string,'Cancel',false,false
 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,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

@@ -3720,6 +3720,10 @@ export namespace Components {
     */
     'debounce': number;
     /**
+    * If `true`, the user cannot interact with the input.
+    */
+    'disabled': boolean;
+    /**
     * Returns the native `<input>` element used under the hood.
     */
     'getInputElement': () => Promise<HTMLInputElement>;
@@ -3790,6 +3794,10 @@ export namespace Components {
     */
     'debounce'?: number;
     /**
+    * If `true`, the user cannot interact with the input.
+    */
+    'disabled'?: boolean;
+    /**
     * The mode determines which platform styles to use.
     */
     'mode'?: Mode;

core/src/components/searchbar/readme.md

@@ -26,6 +26,9 @@ A Searchbar should be used instead of an input to search lists. A clear button i
 <!-- Searchbar with telephone type -->
 <ion-searchbar type="tel"></ion-searchbar>
 
+<!-- Searchbar disabled -->
+<ion-searchbar disabled="true"></ion-searchbar>
+
 <!-- Searchbar with a cancel button and custom cancel button text -->
 <ion-searchbar showCancelButton cancelButtonText="Custom Cancel"></ion-searchbar>
 
@@ -60,6 +63,9 @@ A Searchbar should be used instead of an input to search lists. A clear button i
 <!-- Searchbar with telephone type -->
 <ion-searchbar type="tel"></ion-searchbar>
 
+<!-- Searchbar disabled -->
+<ion-searchbar disabled="true"></ion-searchbar>
+
 <!-- Searchbar with a cancel button and custom cancel button text -->
 <ion-searchbar show-cancel-button cancel-button-text="Custom Cancel"></ion-searchbar>
 
@@ -100,6 +106,9 @@ const Example: React.SFC<{}> = () => (
     {/*-- Searchbar with telephone type --*/}
     <IonSearchbar type="tel"></IonSearchbar>
 
+    {/*-- Searchbar disabled  --*/}
+    <IonSearchbar disabled="true"></IonSearchbar>
+
     {/*-- Searchbar with a cancel button and custom cancel button text --*/}
     <IonSearchbar showCancelButton cancelButtonText="Custom Cancel"></IonSearchbar>
 
@@ -139,6 +148,9 @@ export default Example;
   <!-- Searchbar with telephone type -->
   <ion-searchbar type="tel"></ion-searchbar>
 
+  <!-- Searchbar disabled -->
+  <ion-searchbar disabled="true"></ion-searchbar>
+
   <!-- Searchbar with a cancel button and custom cancel button text -->
   <ion-searchbar showCancelButton cancelButtonText="Custom Cancel"></ion-searchbar>
 
@@ -172,6 +184,7 @@ export default Example;
 | `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.                                                                                                                                                                                                                                           | `string`                                                                    | `'Search'`        |
 | `searchIcon`       | `search-icon`        | The icon to use as the search icon.                                                                                                                                                                                                                                    | `string`                                                                    | `'search'`        |

core/src/components/searchbar/searchbar.scss

@@ -143,3 +143,9 @@
 :host(.searchbar-has-value.searchbar-has-focus) .searchbar-clear-button {
   display: block;
 }
+
+:host(.searchbar-disabled) {
+  cursor: default;
+  opacity: .4;
+  pointer-events: none;
+}

core/src/components/searchbar/searchbar.tsx

@@ -78,6 +78,11 @@ export class Searchbar implements ComponentInterface {
     this.ionChange = debounceEvent(this.ionChange, this.debounce);
   }
 
+  /**
+   * If `true`, the user cannot interact with the input.
+   */
+  @Prop() disabled = false;
+
   /**
    * Set the input's placeholder.
    */
@@ -346,16 +351,22 @@ export class Searchbar implements ComponentInterface {
     return this.value || '';
   }
 
+  private hasValue(): boolean {
+    return this.getValue() !== '';
+  }
+
   hostData() {
     const animated = this.animated && this.config.getBoolean('animated', true);
 
     return {
+      'aria-disabled': this.disabled ? 'true' : null,
       class: {
         ...createColorClasses(this.color),
         [`${this.mode}`]: true,
         'searchbar-animated': animated,
+        'searchbar-disabled': this.disabled,
         'searchbar-no-animate': animated && this.noAnimate,
-        'searchbar-has-value': (this.getValue() !== ''),
+        'searchbar-has-value': this.hasValue(),
         'searchbar-left-aligned': this.shouldAlignLeft,
         'searchbar-has-focus': this.focused
       }
@@ -386,6 +397,7 @@ export class Searchbar implements ComponentInterface {
     return [
       <div class="searchbar-input-container">
         <input
+          disabled={this.disabled}
           ref={el => this.nativeInput = el}
           class="searchbar-input"
           onInput={this.onInput}

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

@@ -29,6 +29,10 @@ <h5 padding-start padding-top> Search - No Cancel Button </h5>
       <ion-searchbar id="noCancel" value="after view" autocorrect="off" autocomplete="off" spellcheck="true" type="text" show-cancel-button="false">
       </ion-searchbar>
 
+      <h5 padding-start padding-top> Search - Disabled </h5>
+      <ion-searchbar id="disabled" value="disabled" type="text" disabled="true">
+      </ion-searchbar>
+
       <h5 padding-start padding-top> Search - Danger </h5>
       <ion-searchbar color="danger" show-cancel-button>
       </ion-searchbar>
@@ -82,6 +86,10 @@ <h5 padding-start padding-top> Search - Animated and No Cancel</h5>
         <ion-button expand="block" color="secondary" onClick="toggleAttr()">Toggle Attribute</ion-button>
       </div>
 
+      <div padding-horizontal>
+        <ion-button expand="block" color="secondary" onClick="toggleDisabled()">Toggle disabled</ion-button>
+      </div>
+
       <script>
         function toggleAttr() {
           var dynamicAttr = document.getElementById('dynamicAttr');
@@ -99,6 +107,14 @@ <h5 padding-start padding-top> Search - Animated and No Cancel</h5>
           dynamicAttr.setAttribute('placeholder', attrPlaceholder);
         }
 
+        function toggleDisabled() {
+          var dynamicAttr = document.getElementById('dynamicAttr');
+
+          // Toggle animated attribute
+          const attrIsAnimated = dynamicAttr.getAttribute('disabled') === 'true' ? false : true;
+          dynamicAttr.setAttribute('disabled', attrIsAnimated);
+        }
+
         function toggleProp() {
           var dynamicProp = document.getElementById('dynamicProp');
           console.log(dynamicProp.autocorrect, dynamicProp.autocomplete, dynamicProp.spellcheck);

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

@@ -11,6 +11,9 @@
 <!-- Searchbar with telephone type -->
 <ion-searchbar type="tel"></ion-searchbar>
 
+<!-- Searchbar disabled -->
+<ion-searchbar disabled="true"></ion-searchbar>
+
 <!-- Searchbar with a cancel button and custom cancel button text -->
 <ion-searchbar showCancelButton cancelButtonText="Custom Cancel"></ion-searchbar>
 

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

@@ -11,6 +11,9 @@
 <!-- Searchbar with telephone type -->
 <ion-searchbar type="tel"></ion-searchbar>
 
+<!-- Searchbar disabled -->
+<ion-searchbar disabled="true"></ion-searchbar>
+
 <!-- Searchbar with a cancel button and custom cancel button text -->
 <ion-searchbar show-cancel-button cancel-button-text="Custom Cancel"></ion-searchbar>
 

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

@@ -17,6 +17,9 @@ const Example: React.SFC<{}> = () => (
     {/*-- Searchbar with telephone type --*/}
     <IonSearchbar type="tel"></IonSearchbar>
 
+    {/*-- Searchbar disabled  --*/}
+    <IonSearchbar disabled="true"></IonSearchbar>
+
     {/*-- Searchbar with a cancel button and custom cancel button text --*/}
     <IonSearchbar showCancelButton cancelButtonText="Custom Cancel"></IonSearchbar>
 

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

@@ -12,6 +12,9 @@
   <!-- Searchbar with telephone type -->
   <ion-searchbar type="tel"></ion-searchbar>
 
+  <!-- Searchbar disabled -->
+  <ion-searchbar disabled="true"></ion-searchbar>
+
   <!-- Searchbar with a cancel button and custom cancel button text -->
   <ion-searchbar showCancelButton cancelButtonText="Custom Cancel"></ion-searchbar>