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

fix(input): properly focus the input when clicking the item padding in WebKit (#21930)

Browse Source 
Related WebKit bug: https://bugs.webkit.org/show_bug.cgi?id=214859

Issue Number: fixes #21509
This commit is contained in:
Brandy Carney
2020-08-27 14:52:02 -04:00
committed by GitHub
parent bd4e931fbc
commit e4964ff77b
6 changed files with 87 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -23,6 +23,16 @@ export class Input implements ComponentInterface {
private didBlurAfterEdit = false;
private tabindex?: string | number;
/**
* This is required for a WebKit bug which requires us to
* blur and focus an input to properly focus the input in
* an item with delegatesFocus. It will no longer be needed
* with iOS 14.
*
* @internal
*/
@Prop() fireFocusEvents = true;
@State() hasFocus = false;
@Element() el!: HTMLElement;
@ -244,7 +254,7 @@ export class Input implements ComponentInterface {
}
/**
* Sets focus on the specified `ion-input`. Use this method instead of the global
* Sets focus on the native `input` in `ion-input`. Use this method instead of the global
* `input.focus()`.
*/
@Method()
@ -254,6 +264,18 @@ export class Input implements ComponentInterface {
}
}
/**
* Sets blur on the native `input` in `ion-input`. Use this method instead of the global
* `input.blur()`.
* @internal
*/
@Method()
async setBlur() {
if (this.nativeInput) {
this.nativeInput.blur();
}
}
/**
* Returns the native `<input>` element used under the hood.
*/
@ -298,7 +320,9 @@ export class Input implements ComponentInterface {
this.focusChanged();
this.emitStyle();
this.ionBlur.emit(ev);
if (this.fireFocusEvents) {
this.ionBlur.emit(ev);
}
}
private onFocus = (ev: FocusEvent) => {
@ -306,7 +330,9 @@ export class Input implements ComponentInterface {
this.focusChanged();
this.emitStyle();
this.ionFocus.emit(ev);
if (this.fireFocusEvents) {
this.ionFocus.emit(ev);
}
}
private onKeydown = (ev: KeyboardEvent) => {