javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-10 00:27:41 +08:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
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`
This commit is contained in:
Liam DeBeasi
2023-08-18 12:06:54 -05:00
committed by GitHub
parent bbfb8f81a6
commit 444acc1f1b
5 changed files with 141 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
core/src/components/input/input.tsx
View File

@ -532,7 +532,7 @@ export class Input implements ComponentInterface {
* Clear the input if the control has not been previously cleared during focus.
* Do not clear if the user hitting enter to submit a form.
*/
if (!this.didInputClearOnEdit && this.hasValue() && ev.key !== 'Enter') {
if (!this.didInputClearOnEdit && this.hasValue() && ev.key !== 'Enter' && ev.key !== 'Tab') {
this.value = '';
this.emitInputChange(ev);
}

57
core/src/components/input/test/basic/index.html Normal file
View File

@ -0,0 +1,57 @@
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8" />
<title>Input - Basic</title>
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
/>
<link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
<link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
<script src="../../../../../scripts/testing/scripts.js"></script>
<script nomodule src="../../../../../dist/ionic/ionic.js"></script>
<script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
<style>
.grid {
display: grid;
grid-template-columns: repeat(5, minmax(250px, 1fr));
grid-row-gap: 20px;
grid-column-gap: 20px;
}
h2 {
font-size: 12px;
font-weight: normal;
color: #6f7378;
margin-top: 10px;
}
@media screen and (max-width: 800px) {
.grid {
grid-template-columns: 1fr;
padding: 0;
}
}
</style>
</head>
<body>
<ion-app>
<ion-header>
<ion-toolbar>
<ion-title>Input - Basic</ion-title>
</ion-toolbar>
</ion-header>
<ion-content id="content" class="ion-padding">
<div class="grid">
<div class="grid-item">
<h2>Default</h2>
<ion-input value="hi@ionic.io" label="Email"></ion-input>
</div>
</div>
</ion-content>
</ion-app>
</body>
</html>

43
core/src/components/input/test/clear-on-edit/input.e2e.ts Normal file
View File

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

37
core/src/components/textarea/test/clear-on-edit/textarea.e2e.ts Normal file
View File

@ -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');
});
});
});

6
core/src/components/textarea/textarea.tsx
View File

@ -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);
};