From c052db7e6b4b4583cbf67080b870d557cee91f7b Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@icloud.com>
Date: Thu, 25 Aug 2022 15:57:27 +0000
Subject: [PATCH 1/3] fix(searchbar): keypress can activate clear button

---
 core/src/components/searchbar/searchbar.tsx   | 21 +++++----
 .../searchbar/test/basic/searchbar.e2e.ts     | 44 +++++++++++++++++++
 2 files changed, 57 insertions(+), 8 deletions(-)

diff --git a/core/src/components/searchbar/searchbar.tsx b/core/src/components/searchbar/searchbar.tsx
index 887d3a47f58..dcbf755ac73 100644
--- a/core/src/components/searchbar/searchbar.tsx
+++ b/core/src/components/searchbar/searchbar.tsx
@@ -243,14 +243,9 @@ export class Searchbar implements ComponentInterface {
   /**
    * Clears the input field and triggers the control change.
    */
-  private onClearInput = (ev?: Event, shouldFocus?: boolean) => {
+  private onClearInput = (shouldFocus?: boolean) => {
     this.ionClear.emit();
 
-    if (ev) {
-      ev.preventDefault();
-      ev.stopPropagation();
-    }
-
     // setTimeout() fixes https://github.com/ionic-team/ionic/issues/7527
     // wait for 4 frames
     setTimeout(() => {
@@ -516,6 +511,9 @@ export class Searchbar implements ComponentInterface {
             autoComplete={this.autocomplete}
             autoCorrect={this.autocorrect}
             spellcheck={this.spellcheck}
+            onFocusout={() => {
+              console.log('focus out');
+            }}
           />
 
           {mode === 'md' && cancelButton}
@@ -533,8 +531,15 @@ export class Searchbar implements ComponentInterface {
             type="button"
             no-blur
             class="searchbar-clear-button"
-            onMouseDown={(ev) => this.onClearInput(ev, true)}
-            onTouchStart={(ev) => this.onClearInput(ev, true)}
+            onPointerDown={(ev) => {
+              /**
+               * This prevents mobile browsers from
+               * blurring the input when the clear
+               * button is activated.
+               */
+              ev.preventDefault();
+            }}
+            onClick={() => this.onClearInput(true)}
           >
             <ion-icon
               aria-hidden="true"
diff --git a/core/src/components/searchbar/test/basic/searchbar.e2e.ts b/core/src/components/searchbar/test/basic/searchbar.e2e.ts
index b387954480f..bc8437ef98d 100644
--- a/core/src/components/searchbar/test/basic/searchbar.e2e.ts
+++ b/core/src/components/searchbar/test/basic/searchbar.e2e.ts
@@ -33,3 +33,47 @@ test.describe('searchbar: basic', () => {
     await expect(cancelButton).toHaveCount(0);
   });
 });
+
+test.describe('searchbar: clear button', () => {
+  test.beforeEach(({ skip }) => {
+    skip.rtl();
+  })
+  test('should clear the input when pressed', async ({ page }) => {
+    await page.setContent(`
+      <ion-searchbar value="abc" show-clear-button="always"></ion-searchbar>
+    `);
+
+    const searchbar = page.locator('ion-searchbar');
+    const clearButton = searchbar.locator('.searchbar-clear-button');
+
+    await expect(searchbar).toHaveJSProperty('value', 'abc');
+
+    await clearButton.click();
+    await page.waitForChanges();
+
+    await expect(searchbar).toHaveJSProperty('value', '');
+  })
+  /**
+   * Note: This only tests the desktop focus behavior.
+   * Mobile browsers have different restrictions around
+   * focusing inputs, so these platforms should always
+   * be tested when making changes to the focus behavior.
+   */
+  test('should keep the input focused when the clear button is pressed', async ({ page }) => {
+    await page.setContent(`
+      <ion-searchbar value="abc"></ion-searchbar>
+    `);
+
+    const searchbar = page.locator('ion-searchbar');
+    const nativeInput = searchbar.locator('input');
+    const clearButton = searchbar.locator('.searchbar-clear-button');
+
+    await searchbar.click();
+    await expect(nativeInput).toBeFocused();
+
+    await clearButton.click();
+    await page.waitForChanges();
+
+    await expect(nativeInput).toBeFocused();
+  })
+})

From 154115fd57942a8c9f38e4bdf6ab7dc1347d6c1b Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@icloud.com>
Date: Thu, 25 Aug 2022 15:58:14 +0000
Subject: [PATCH 2/3] chore(): remove log

---
 core/src/components/searchbar/searchbar.tsx | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/core/src/components/searchbar/searchbar.tsx b/core/src/components/searchbar/searchbar.tsx
index dcbf755ac73..8b352c7f185 100644
--- a/core/src/components/searchbar/searchbar.tsx
+++ b/core/src/components/searchbar/searchbar.tsx
@@ -511,9 +511,6 @@ export class Searchbar implements ComponentInterface {
             autoComplete={this.autocomplete}
             autoCorrect={this.autocorrect}
             spellcheck={this.spellcheck}
-            onFocusout={() => {
-              console.log('focus out');
-            }}
           />
 
           {mode === 'md' && cancelButton}

From a4441760c603030eea17c17bcdd7f84b8f12bd1d Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@icloud.com>
Date: Thu, 25 Aug 2022 12:29:33 -0400
Subject: [PATCH 3/3] chore(): lint

---
 core/src/components/searchbar/test/basic/searchbar.e2e.ts | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/core/src/components/searchbar/test/basic/searchbar.e2e.ts b/core/src/components/searchbar/test/basic/searchbar.e2e.ts
index bc8437ef98d..643777e159c 100644
--- a/core/src/components/searchbar/test/basic/searchbar.e2e.ts
+++ b/core/src/components/searchbar/test/basic/searchbar.e2e.ts
@@ -37,7 +37,7 @@ test.describe('searchbar: basic', () => {
 test.describe('searchbar: clear button', () => {
   test.beforeEach(({ skip }) => {
     skip.rtl();
-  })
+  });
   test('should clear the input when pressed', async ({ page }) => {
     await page.setContent(`
       <ion-searchbar value="abc" show-clear-button="always"></ion-searchbar>
@@ -52,7 +52,7 @@ test.describe('searchbar: clear button', () => {
     await page.waitForChanges();
 
     await expect(searchbar).toHaveJSProperty('value', '');
-  })
+  });
   /**
    * Note: This only tests the desktop focus behavior.
    * Mobile browsers have different restrictions around
@@ -75,5 +75,5 @@ test.describe('searchbar: clear button', () => {
     await page.waitForChanges();
 
     await expect(nativeInput).toBeFocused();
-  })
-})
+  });
+});