fix(input, textarea): clearOnEdit does not clear when pressing Tab (#28005)

Issue number: resolves #27746

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->

Pressing the Tab key when focused on an input/textarea with
`clearOnEdit` clears the text field and then moves focus to the next
focusable element.

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- Pressing the Tab key does not clear the text field even when
clearOnEdit is enabled.
- Added test coverage
- I also noticed that input did not have an `index.html` file in the
basic directory, so I added that.

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->

Dev build: `7.3.1-dev.11692202566.13cd16c4`

core/src/components/textarea/test/clear-on-edit/textarea.e2e.ts

@@ -0,0 +1,37 @@
+import { expect } from '@playwright/test';
+import { test, configs } from '@utils/test/playwright';
+
+configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => {
+  test.describe(title('textarea: clearOnEdit'), () => {
+    test('should clear when typed into', async ({ page }) => {
+      await page.setContent(
+        `<ion-textarea value="abc" clear-on-edit="true" aria-label="textarea"></ion-textarea>`,
+        config
+      );
+
+      const ionInput = await page.spyOnEvent('ionInput');
+
+      const textarea = page.locator('ion-textarea');
+      await textarea.locator('textarea').type('h');
+
+      await ionInput.next();
+
+      await expect(textarea).toHaveJSProperty('value', 'h');
+    });
+
+    test('should not clear when tab is pressed', async ({ page }) => {
+      await page.setContent(
+        `<ion-textarea value="abc" clear-on-edit="true" aria-label="textarea"></ion-textarea>`,
+        config
+      );
+
+      const textarea = page.locator('ion-textarea');
+      await textarea.locator('textarea').focus();
+
+      await page.keyboard.press('Tab');
+      await page.waitForChanges();
+
+      await expect(textarea).toHaveJSProperty('value', 'abc');
+    });
+  });
+});

core/src/components/textarea/textarea.tsx

@@ -434,7 +434,7 @@ export class Textarea implements ComponentInterface {
   /**
    * Check if we need to clear the text input if clearOnEdit is enabled
    */
-  private checkClearOnEdit(ev: Event) {
+  private checkClearOnEdit(ev: KeyboardEvent) {
     if (!this.clearOnEdit) {
       return;
     }
@@ -442,7 +442,7 @@ export class Textarea implements ComponentInterface {
      * Clear the textarea if the control has not been previously cleared
      * during focus.
      */
-    if (!this.didTextareaClearOnEdit && this.hasValue()) {
+    if (!this.didTextareaClearOnEdit && this.hasValue() && ev.key !== 'Tab') {
       this.value = '';
       this.emitInputChange(ev);
     }
@@ -501,7 +501,7 @@ export class Textarea implements ComponentInterface {
     this.ionBlur.emit(ev);
   };
 
-  private onKeyDown = (ev: Event) => {
+  private onKeyDown = (ev: KeyboardEvent) => {
     this.checkClearOnEdit(ev);
   };