add utils, fix css bug on md

core/src/components/searchbar/searchbar.md.scss

@@ -110,7 +110,8 @@
   display: block;
 }
 
-:host(.searchbar-has-focus) .searchbar-cancel-button + .searchbar-search-icon {
+:host(.searchbar-has-focus) .searchbar-cancel-button + .searchbar-search-icon,
+:host(.searchbar-should-show-cancel) .searchbar-cancel-button + .searchbar-search-icon {
   display: none;
 }
 

core/src/components/searchbar/searchbar.tsx

@@ -5,6 +5,8 @@ import { debounceEvent } from '../../utils/helpers';
 import { sanitizeDOMString } from '../../utils/sanitization';
 import { createColorClasses } from '../../utils/theme';
 
+import { isCancelButtonSetToFocus, isCancelButtonSetToNever } from './searchbar.utils';
+
 @Component({
   tag: 'ion-searchbar',
   styleUrls: {
@@ -384,44 +386,13 @@ export class Searchbar implements ComponentInterface {
    */
   private shouldShowCancelButton(): boolean {
     if (
-      this.isCancelButtonSetToNever() ||
-      (this.isCancelButtonSetToFocus() && !this.focused)
+      isCancelButtonSetToNever(this.showCancelButton) ||
+      (isCancelButtonSetToFocus(this.showCancelButton) && !this.focused)
     ) { return false; }
 
     return true;
   }
 
-  /**
-   * Wrapper method to check if the cancel button
-   * should be shown on focus.
-   *
-   * TODO: Remove this when the `true` and `false`
-   * options are removed.
-   */
-  private isCancelButtonSetToFocus(): boolean {
-    return (
-      this.showCancelButton === 'focus' ||
-      this.showCancelButton === 'true' ||
-      this.showCancelButton === true ||
-      this.showCancelButton === ''
-    );
-  }
-
-  /**
-   * Wrapper method to check if the cancel button
-   * should never be shown.
-   *
-   * TODO: Remove this when the `true` and `false`
-   * options are removed.
-   */
-  private isCancelButtonSetToNever(): boolean {
-    return (
-      this.showCancelButton === 'never' ||
-      this.showCancelButton === 'false' ||
-      this.showCancelButton === false
-    );
-  }
-
   hostData() {
     const animated = this.animated && this.config.getBoolean('animated', true);
 
@@ -433,7 +404,7 @@ export class Searchbar implements ComponentInterface {
         'searchbar-animated': animated,
         'searchbar-disabled': this.disabled,
         'searchbar-no-animate': animated && this.noAnimate,
-        'searchbar-has-value': this.hasValue(),
+        'searchb ar-has-value': this.hasValue(),
         'searchbar-left-aligned': this.shouldAlignLeft,
         'searchbar-has-focus': this.focused,
         'searchbar-should-show-cancel': this.shouldShowCancelButton()
@@ -445,7 +416,7 @@ export class Searchbar implements ComponentInterface {
     const clearIcon = this.clearIcon || (this.mode === 'ios' ? 'ios-close-circle' : 'md-close');
     const searchIcon = this.searchIcon;
 
-    const cancelButton = !this.isCancelButtonSetToNever() && (
+    const cancelButton = !isCancelButtonSetToNever(this.showCancelButton) && (
       <button
         type="button"
         tabIndex={this.mode === 'ios' && !this.shouldShowCancelButton() ? -1 : undefined}

core/src/components/searchbar/searchbar.utils.ts

@@ -0,0 +1,28 @@
+/**
+ * Check if the cancel button should never be shown.
+ *
+ * TODO: Remove this when the `true` and `false`
+ * options are removed.
+ */
+export const isCancelButtonSetToNever = (showCancelButton: boolean | string): boolean => {
+  return (
+    showCancelButton === 'never' ||
+    showCancelButton === 'false' ||
+    showCancelButton === false
+  );
+};
+
+/**
+ * Check if the cancel button should be shown on focus.
+ *
+ * TODO: Remove this when the `true` and `false`
+ * options are removed.
+ */
+export const isCancelButtonSetToFocus = (showCancelButton: boolean | string): boolean => {
+  return (
+    showCancelButton === 'focus' ||
+    showCancelButton === 'true' ||
+    showCancelButton === true ||
+    showCancelButton === ''
+  );
+};