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

fix(input): clear button can now be tabbed to (#21633)

Browse Source 
fixes https://github.com/ionic-team/ionic/issues/21549
This commit is contained in:
Liam DeBeasi
2020-07-01 10:13:12 -04:00
committed by GitHub
parent c458523b0d
commit 1dcd9de50a
2 changed files with 10 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
core/src/components/input/input.scss
View File

@ -147,7 +147,11 @@
appearance: none;
}
:host(.has-focus.has-value) .input-clear-icon {
.input-clear-icon:focus {
opacity: 0.5;
}
:host(.has-value) .input-clear-icon {
visibility: visible;
}

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

@ -323,6 +323,10 @@ export class Input implements ComponentInterface {
}
}
private clearTextOnEnter = (ev: KeyboardEvent) => {
if (ev.key === 'Enter') { this.clearTextInput(ev); }
}
private clearTextInput = (ev?: Event) => {
if (this.clearInput && !this.readonly && !this.disabled && ev) {
ev.preventDefault();
@ -408,9 +412,9 @@ export class Input implements ComponentInterface {
aria-label="reset"
type="button"
class="input-clear-icon"
tabindex="-1"
onTouchStart={this.clearTextInput}
onMouseDown={this.clearTextInput}
onKeyDown={this.clearTextOnEnter}
/>}
</Host>
);