From bba311653dadf9da9d8fb4065a961bbdcfe19804 Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@icloud.com>
Date: Tue, 11 Jun 2019 12:33:33 -0400
Subject: [PATCH] add utils, fix css bug on md

---
 .../components/searchbar/searchbar.md.scss    |  3 +-
 core/src/components/searchbar/searchbar.tsx   | 41 +++----------------
 .../components/searchbar/searchbar.utils.ts   | 28 +++++++++++++
 3 files changed, 36 insertions(+), 36 deletions(-)
 create mode 100644 core/src/components/searchbar/searchbar.utils.ts

diff --git a/core/src/components/searchbar/searchbar.md.scss b/core/src/components/searchbar/searchbar.md.scss
index 4f7451b3a1..6b111fab26 100644
--- a/core/src/components/searchbar/searchbar.md.scss
+++ b/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;
 }
 
diff --git a/core/src/components/searchbar/searchbar.tsx b/core/src/components/searchbar/searchbar.tsx
index 29fcfc3161..d790164641 100644
--- a/core/src/components/searchbar/searchbar.tsx
+++ b/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}
diff --git a/core/src/components/searchbar/searchbar.utils.ts b/core/src/components/searchbar/searchbar.utils.ts
new file mode 100644
index 0000000000..cb6ae61775
--- /dev/null
+++ b/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 === ''
+  );
+};