fix(searchbar): keypress can activate clear button (#25824)

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(() => {
@@ -533,8 +528,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"

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();
+  });
+});