diff --git a/core/src/components/input/input.ionic.scss b/core/src/components/input/input.ionic.scss
index a9f5301e981..4a7431dc4e6 100644
--- a/core/src/components/input/input.ionic.scss
+++ b/core/src/components/input/input.ionic.scss
@@ -236,11 +236,14 @@
  * only looked at the native input, tabbing to the clear
  * button would immediately hide it.
  *
+ * The pressed class keeps it visible mid-press
+ * so the click still lands on the button.
+ *
  * Note that the clear button also requires the native input
  * to have any value, but this is not specific to the ionic
  * theme, so it is handled elsewhere.
  */
-:host(:not(:focus-within)) .input-clear-icon {
+:host(:not(:focus-within)) .input-clear-icon:not(.input-clear-button-pressed) {
   display: none;
 }
 
diff --git a/core/src/components/input/input.tsx b/core/src/components/input/input.tsx
index 0075f5691c7..672a2bf414a 100644
--- a/core/src/components/input/input.tsx
+++ b/core/src/components/input/input.tsx
@@ -15,7 +15,7 @@ import {
   h,
 } from '@stencil/core';
 import type { NotchController } from '@utils/forms';
-import { createNotchController, checkInvalidState } from '@utils/forms';
+import { createClearButtonPressController, createNotchController, checkInvalidState } from '@utils/forms';
 import type { Attributes } from '@utils/helpers';
 import { inheritAriaAttributes, debounceEvent, inheritAttributes, componentOnReady } from '@utils/helpers';
 import { printIonWarning } from '@utils/logging';
@@ -90,6 +90,13 @@ export class Input implements ComponentInterface {
    */
   @State() isInvalid = false;
 
+  /** Keeps the clear button visible for the duration of a press. */
+  @State() isClearButtonPressed = false;
+
+  private readonly clearButtonPressController = createClearButtonPressController(
+    (isPressed) => (this.isClearButtonPressed = isPressed)
+  );
+
   @Element() el!: HTMLIonInputElement;
 
   private validationObserver?: MutationObserver;
@@ -497,6 +504,8 @@ export class Input implements ComponentInterface {
       );
     }
 
+    this.clearButtonPressController.destroy();
+
     if (this.slotMutationController) {
       this.slotMutationController.destroy();
       this.slotMutationController = undefined;
@@ -729,6 +738,8 @@ export class Input implements ComponentInterface {
   };
 
   private clearTextInput = (ev?: Event) => {
+    this.clearButtonPressController.release();
+
     if (this.clearInput && !this.readonly && !this.disabled && ev) {
       ev.preventDefault();
       ev.stopPropagation();
@@ -1075,15 +1086,12 @@ export class Input implements ComponentInterface {
               <button
                 aria-label="reset"
                 type="button"
-                class="input-clear-icon"
-                onPointerDown={(ev) => {
-                  /**
-                   * This prevents mobile browsers from
-                   * blurring the input when the clear
-                   * button is activated.
-                   */
-                  ev.preventDefault();
+                class={{
+                  'input-clear-icon': true,
+                  'input-clear-button-pressed': this.isClearButtonPressed,
                 }}
+                onPointerDown={this.clearButtonPressController.onPointerDown}
+                onPointerCancel={this.clearButtonPressController.release}
                 onClick={this.clearTextInput}
               >
                 <ion-icon aria-hidden="true" icon={inputClearIcon}></ion-icon>
diff --git a/core/src/components/input/test/basic/input.e2e.ts b/core/src/components/input/test/basic/input.e2e.ts
index 15ef224a646..a44c8a7cf78 100644
--- a/core/src/components/input/test/basic/input.e2e.ts
+++ b/core/src/components/input/test/basic/input.e2e.ts
@@ -347,5 +347,85 @@ configs({ modes: ['ionic-md'], directions: ['ltr'] }).forEach(({ title, config }
       await expect(clearButton).toBeFocused();
       await expect(clearButton).toBeVisible();
     });
+
+    test('should clear the value when the input blurs between pointerdown and click', async ({ page }) => {
+      await page.setContent(
+        `
+          <ion-input
+            label="Label"
+            label-placement="stacked"
+            clear-input="true"
+            value="abc"
+          ></ion-input>
+        `,
+        config
+      );
+
+      const input = page.locator('ion-input');
+      const nativeInput = input.locator('input');
+      const clearButton = input.locator('.input-clear-icon');
+
+      await input.evaluate((el: HTMLIonInputElement) => el.setFocus());
+      await expect(clearButton).toBeVisible();
+
+      const box = (await clearButton.boundingBox())!;
+      await page.mouse.move(box.x + box.width / 2, box.y + box.height / 2);
+      await page.mouse.down();
+
+      // Some browsers blur anyway, despite the `preventDefault` on `pointerdown`.
+      await nativeInput.evaluate((el: HTMLInputElement) => el.blur());
+      await page.waitForChanges();
+
+      await page.mouse.up();
+      await page.waitForChanges();
+
+      await expect(input).toHaveJSProperty('value', '');
+      await expect(nativeInput).toBeFocused();
+
+      // Clearing stops the click from bubbling, so it has to end the press itself.
+      await input.evaluate((el: HTMLIonInputElement) => (el.value = 'abc'));
+      await page.waitForChanges();
+      await expect(clearButton).toBeVisible();
+
+      await nativeInput.evaluate((el: HTMLInputElement) => el.blur());
+      await page.waitForChanges();
+
+      await expect(clearButton).not.toBeVisible();
+    });
+
+    test('should hide the clear button when the press is abandoned', async ({ page }) => {
+      await page.setContent(
+        `
+          <ion-input
+            label="Label"
+            label-placement="stacked"
+            clear-input="true"
+            value="abc"
+          ></ion-input>
+        `,
+        config
+      );
+
+      const input = page.locator('ion-input');
+      const nativeInput = input.locator('input');
+      const clearButton = input.locator('.input-clear-icon');
+
+      await input.evaluate((el: HTMLIonInputElement) => el.setFocus());
+      await expect(clearButton).toBeVisible();
+
+      const box = (await clearButton.boundingBox())!;
+      await page.mouse.move(box.x + box.width / 2, box.y + box.height / 2);
+      await page.mouse.down();
+      await nativeInput.evaluate((el: HTMLInputElement) => el.blur());
+      await page.waitForChanges();
+
+      // Releasing off the button sends the click to an ancestor, not the button.
+      await page.mouse.move(box.x + box.width / 2, box.y + box.height / 2 + 200);
+      await page.mouse.up();
+      await page.waitForChanges();
+
+      await expect(input).toHaveJSProperty('value', 'abc');
+      await expect(clearButton).not.toBeVisible();
+    });
   });
 });
diff --git a/core/src/components/searchbar/searchbar.tsx b/core/src/components/searchbar/searchbar.tsx
index 41f3a4dfe97..790e9a0845e 100644
--- a/core/src/components/searchbar/searchbar.tsx
+++ b/core/src/components/searchbar/searchbar.tsx
@@ -3,6 +3,7 @@ import magnifyingGlassRegular from '@phosphor-icons/core/assets/regular/magnifyi
 import xRegular from '@phosphor-icons/core/assets/regular/x.svg';
 import type { ComponentInterface, EventEmitter } from '@stencil/core';
 import { Component, Element, Event, Host, Method, Prop, State, Watch, forceUpdate, h } from '@stencil/core';
+import { createClearButtonPressController } from '@utils/forms';
 import { debounceEvent, raf, componentOnReady, inheritAttributes } from '@utils/helpers';
 import type { Attributes } from '@utils/helpers';
 import { isRTL } from '@utils/rtl';
@@ -49,6 +50,13 @@ export class Searchbar implements ComponentInterface {
   @State() focused = false;
   @State() noAnimate = true;
 
+  /** Keeps the clear button mounted for the duration of a press. */
+  @State() isClearButtonPressed = false;
+
+  private readonly clearButtonPressController = createClearButtonPressController(
+    (isPressed) => (this.isClearButtonPressed = isPressed)
+  );
+
   /**
    * lang and dir are globally enumerated attributes.
    * As a result, creating these as properties
@@ -320,6 +328,8 @@ export class Searchbar implements ComponentInterface {
   }
 
   disconnectedCallback() {
+    this.clearButtonPressController.destroy();
+
     if (this.loadTimeout) {
       clearTimeout(this.loadTimeout);
     }
@@ -394,6 +404,8 @@ export class Searchbar implements ComponentInterface {
    * Clears the input field and triggers the control change.
    */
   private onClearInput = async (shouldFocus?: boolean) => {
+    this.clearButtonPressController.release();
+
     if (this.clearTimeout) {
       clearTimeout(this.clearTimeout);
     }
@@ -661,13 +673,17 @@ export class Searchbar implements ComponentInterface {
    * Determines whether or not the clear button should be visible onscreen.
    * Clear button should be shown if one of two conditions applies:
    * 1. `showClearButton` is set to `always`.
-   * 2. `showClearButton` is set to `focus`, and the searchbar has been focused.
+   * 2. `showClearButton` is set to `focus`, and the searchbar has been
+   *    focused or a clear button press is still in flight.
    * Unless the `theme` is `ionic` and the searchbar is disabled.
    */
   private shouldShowClearButton(): boolean {
     const theme = getIonTheme(this);
 
-    if (this.showClearButton === 'never' || (this.showClearButton === 'focus' && !this.focused)) {
+    if (
+      this.showClearButton === 'never' ||
+      (this.showClearButton === 'focus' && !this.focused && !this.isClearButtonPressed)
+    ) {
       return false;
     }
 
@@ -883,14 +899,8 @@ export class Searchbar implements ComponentInterface {
               type="button"
               no-blur
               class="searchbar-clear-button"
-              onPointerDown={(ev) => {
-                /**
-                 * This prevents mobile browsers from
-                 * blurring the input when the clear
-                 * button is activated.
-                 */
-                ev.preventDefault();
-              }}
+              onPointerDown={this.clearButtonPressController.onPointerDown}
+              onPointerCancel={this.clearButtonPressController.release}
               onClick={() => this.onClearInput(true)}
             >
               <ion-icon
diff --git a/core/src/components/searchbar/test/basic/searchbar.e2e.ts b/core/src/components/searchbar/test/basic/searchbar.e2e.ts
index 94d51a95902..1be78a5febf 100644
--- a/core/src/components/searchbar/test/basic/searchbar.e2e.ts
+++ b/core/src/components/searchbar/test/basic/searchbar.e2e.ts
@@ -78,6 +78,56 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
 
       await expect(nativeInput).toBeFocused();
     });
+
+    test('should clear the value when the searchbar blurs between pointerdown and click', async ({ page }) => {
+      await page.setContent(`<ion-searchbar value="abc" show-clear-button="focus"></ion-searchbar>`, config);
+
+      const searchbar = page.locator('ion-searchbar');
+      const nativeInput = searchbar.locator('input');
+      const clearButton = searchbar.locator('.searchbar-clear-button');
+
+      await searchbar.evaluate((el: HTMLIonSearchbarElement) => el.setFocus());
+      await expect(clearButton).toBeVisible();
+
+      const box = (await clearButton.boundingBox())!;
+      await page.mouse.move(box.x + box.width / 2, box.y + box.height / 2);
+      await page.mouse.down();
+
+      // Some browsers blur anyway, despite the `preventDefault` on `pointerdown`.
+      await nativeInput.evaluate((el: HTMLInputElement) => el.blur());
+      await page.waitForChanges();
+
+      await page.mouse.up();
+      await page.waitForChanges();
+
+      await expect(searchbar).toHaveJSProperty('value', '');
+    });
+
+    test('should hide the clear button when the press is abandoned', async ({ page }) => {
+      await page.setContent(`<ion-searchbar value="abc" show-clear-button="focus"></ion-searchbar>`, config);
+
+      const searchbar = page.locator('ion-searchbar');
+      const nativeInput = searchbar.locator('input');
+      const clearButton = searchbar.locator('.searchbar-clear-button');
+
+      await searchbar.evaluate((el: HTMLIonSearchbarElement) => el.setFocus());
+      await expect(clearButton).toBeVisible();
+
+      const box = (await clearButton.boundingBox())!;
+      await page.mouse.move(box.x + box.width / 2, box.y + box.height / 2);
+      await page.mouse.down();
+      await nativeInput.evaluate((el: HTMLInputElement) => el.blur());
+      await page.waitForChanges();
+
+      // Releasing off the button sends the click to an ancestor, not the button.
+      await page.mouse.move(box.x + box.width / 2, box.y + box.height / 2 + 200);
+      await page.mouse.up();
+      // A regression would clear via onClearInput's 64ms timer; outlast it.
+      await page.waitForTimeout(100);
+
+      await expect(searchbar).toHaveJSProperty('value', 'abc');
+      await expect(clearButton).not.toBeVisible();
+    });
   });
 
   test.describe(title('searchbar: placeholder'), () => {
diff --git a/core/src/utils/forms/clear-button-press-controller.ts b/core/src/utils/forms/clear-button-press-controller.ts
new file mode 100644
index 00000000000..a3699252ab2
--- /dev/null
+++ b/core/src/utils/forms/clear-button-press-controller.ts
@@ -0,0 +1,55 @@
+import { doc } from '@utils/browser';
+
+/**
+ * Tracks an in-flight press on a clear button so a blur landing mid-press can't
+ * hide or unmount the button before the press produces its click.
+ *
+ * Calling `preventDefault()` on `pointerdown` is meant to stop the field
+ * blurring, but not every browser honors it (iOS Safari blurs anyway). The
+ * press is released on `click` rather than `pointerup` because touch
+ * dispatches the click after the finger lifts.
+ *
+ * @internal
+ * @param onPressChange Receives the press state.
+ */
+export const createClearButtonPressController = (
+  onPressChange: (isPressed: boolean) => void
+): ClearButtonPressController => {
+  const release = () => {
+    doc?.removeEventListener('click', release);
+
+    onPressChange(false);
+  };
+
+  const onPointerDown = (ev: PointerEvent) => {
+    ev.preventDefault();
+
+    // Only a primary press produces a click.
+    if (ev.button !== 0) {
+      return;
+    }
+
+    onPressChange(true);
+
+    doc?.addEventListener('click', release, { once: true });
+  };
+
+  // Teardown also clears the press, so a disconnect mid-press can't leave the button stuck visible.
+  const destroy = () => {
+    release();
+  };
+
+  return {
+    onPointerDown,
+    release,
+    destroy,
+  };
+};
+
+export type ClearButtonPressController = {
+  onPointerDown: (ev: PointerEvent) => void;
+  /** Ends the press without waiting for a click. */
+  release: () => void;
+  /** Ends any in-flight press. The controller stays usable if the host reconnects. */
+  destroy: () => void;
+};
diff --git a/core/src/utils/forms/index.ts b/core/src/utils/forms/index.ts
index d54258b956b..5bcb86650b0 100644
--- a/core/src/utils/forms/index.ts
+++ b/core/src/utils/forms/index.ts
@@ -2,3 +2,4 @@ export * from './notch-controller';
 export * from './compare-with-utils';
 export * from './item-multiple-inputs';
 export * from './validity';
+export * from './clear-button-press-controller';
diff --git a/core/src/utils/forms/test/clear-button-press-controller.spec.ts b/core/src/utils/forms/test/clear-button-press-controller.spec.ts
new file mode 100644
index 00000000000..d5d6c83702e
--- /dev/null
+++ b/core/src/utils/forms/test/clear-button-press-controller.spec.ts
@@ -0,0 +1,113 @@
+import { createClearButtonPressController } from '../clear-button-press-controller';
+
+/**
+ * jsdom does not implement `PointerEvent`, but the controller only reads
+ * `button` and calls `preventDefault`, both of which `MouseEvent` provides.
+ */
+const pointerEvent = (type: string, button = 0) =>
+  new MouseEvent(type, { button, bubbles: true, cancelable: true }) as unknown as PointerEvent;
+
+describe('Clear Button Press Controller', () => {
+  it('should mark a primary press as in flight', () => {
+    const onPressChange = jest.fn();
+    const controller = createClearButtonPressController(onPressChange);
+
+    controller.onPointerDown(pointerEvent('pointerdown'));
+
+    expect(onPressChange).toHaveBeenCalledWith(true);
+  });
+
+  it('should prevent the default press behavior that blurs the field', () => {
+    const controller = createClearButtonPressController(jest.fn());
+    const ev = pointerEvent('pointerdown');
+
+    controller.onPointerDown(ev);
+
+    expect(ev.defaultPrevented).toBe(true);
+  });
+
+  it('should ignore a non-primary press, which produces no click', () => {
+    const onPressChange = jest.fn();
+    const controller = createClearButtonPressController(onPressChange);
+
+    controller.onPointerDown(pointerEvent('pointerdown', 2));
+    document.dispatchEvent(pointerEvent('click'));
+
+    expect(onPressChange).not.toHaveBeenCalled();
+  });
+
+  it('should release the press once the click it produced has dispatched', () => {
+    const onPressChange = jest.fn();
+    const controller = createClearButtonPressController(onPressChange);
+
+    controller.onPointerDown(pointerEvent('pointerdown'));
+    document.dispatchEvent(pointerEvent('click'));
+
+    expect(onPressChange).toHaveBeenLastCalledWith(false);
+  });
+
+  it('should release an abandoned press', () => {
+    const onPressChange = jest.fn();
+    const controller = createClearButtonPressController(onPressChange);
+
+    controller.onPointerDown(pointerEvent('pointerdown'));
+    controller.release();
+
+    expect(onPressChange).toHaveBeenLastCalledWith(false);
+  });
+
+  it('should not react to clicks elsewhere once the press has been released', () => {
+    const onPressChange = jest.fn();
+    const controller = createClearButtonPressController(onPressChange);
+
+    controller.onPointerDown(pointerEvent('pointerdown'));
+    controller.release();
+    onPressChange.mockClear();
+
+    document.dispatchEvent(pointerEvent('click'));
+
+    expect(onPressChange).not.toHaveBeenCalled();
+  });
+
+  it('should track a second press on the same controller', () => {
+    const onPressChange = jest.fn();
+    const controller = createClearButtonPressController(onPressChange);
+
+    controller.onPointerDown(pointerEvent('pointerdown'));
+    controller.release();
+
+    controller.onPointerDown(pointerEvent('pointerdown'));
+    expect(onPressChange).toHaveBeenLastCalledWith(true);
+
+    document.dispatchEvent(pointerEvent('click'));
+    expect(onPressChange).toHaveBeenLastCalledWith(false);
+  });
+
+  it('should stop tracking a pending press when destroyed', () => {
+    const onPressChange = jest.fn();
+    const controller = createClearButtonPressController(onPressChange);
+
+    controller.onPointerDown(pointerEvent('pointerdown'));
+    controller.destroy();
+
+    expect(onPressChange).toHaveBeenLastCalledWith(false);
+
+    onPressChange.mockClear();
+    document.dispatchEvent(pointerEvent('click'));
+
+    expect(onPressChange).not.toHaveBeenCalled();
+  });
+
+  it('should stay usable after being destroyed, since the host can reconnect', () => {
+    const onPressChange = jest.fn();
+    const controller = createClearButtonPressController(onPressChange);
+
+    controller.destroy();
+
+    controller.onPointerDown(pointerEvent('pointerdown'));
+    expect(onPressChange).toHaveBeenLastCalledWith(true);
+
+    document.dispatchEvent(pointerEvent('click'));
+    expect(onPressChange).toHaveBeenLastCalledWith(false);
+  });
+});