fix(input, textarea): clearOnInput ignores key modifiers (#28639)

Issue number: resolves #28633

---------

<!-- 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. -->

In https://github.com/ionic-team/ionic-framework/pull/28005 I introduced
a fix that causes "clearOnEdit" to not clear input/textarea when the Tab
key was pressed. However, there were several edge cases I missed. For
instance, pressing the "shift" key and then the "tab" key would still
clear the input because "shift" was not explicitly excluded.

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

- Input and textarea now explicitly ignores modifier keys that do not
change the value of the input
- `didInputClearOnEdit` is not set to `true` when an ignored key is
pressed. Otherwise, pressing an ignored key and then an accepted key
would not cause the input to be cleared. For example, pressing "shift",
releasing "shift", then pressing "A" should cause the input to still get
cleared.
- Added test coverage

## 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. -->

Playwright bug report for
a9f34a54f1:
https://github.com/microsoft/playwright/issues/28495
This commit is contained in:
Liam DeBeasi
2023-12-11 15:35:25 -05:00
committed by GitHub
parent fc88613fef
commit 8f7d87c680
4 changed files with 152 additions and 12 deletions

View File

@ -549,15 +549,37 @@ export class Input implements ComponentInterface {
if (!this.shouldClearOnEdit()) {
return;
}
/**
* The following keys do not modify the
* contents of the input. As a result, pressing
* them should not edit the input.
*
* We can't check to see if the value of the input
* was changed because we call checkClearOnEdit
* in a keydown listener, and the key has not yet
* been added to the input.
*/
const IGNORED_KEYS = ['Enter', 'Tab', 'Shift', 'Meta', 'Alt', 'Control'];
const pressedIgnoredKey = IGNORED_KEYS.includes(ev.key);
/**
* 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' && ev.key !== 'Tab') {
if (!this.didInputClearOnEdit && this.hasValue() && !pressedIgnoredKey) {
this.value = '';
this.emitInputChange(ev);
}
this.didInputClearOnEdit = true;
/**
* Pressing an IGNORED_KEYS first and
* then an allowed key will cause the input to not
* be cleared.
*/
if (!pressedIgnoredKey) {
this.didInputClearOnEdit = true;
}
}
private onCompositionStart = () => {