perf(item): remove delegatesFocus patch for iOS 13 (#25822)

This commit is contained in:
Liam DeBeasi
2022-08-25 11:34:25 -05:00
committed by GitHub
parent 1eb6fd04d7
commit ee3467c9f1
5 changed files with 4 additions and 129 deletions

View File

@ -1076,10 +1076,6 @@ export namespace Components {
* A hint to the browser for which enter key to display. Possible values: `"enter"`, `"done"`, `"go"`, `"next"`, `"previous"`, `"search"`, and `"send"`. * A hint to the browser for which enter key to display. Possible values: `"enter"`, `"done"`, `"go"`, `"next"`, `"previous"`, `"search"`, and `"send"`.
*/ */
"enterkeyhint"?: 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send'; "enterkeyhint"?: 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send';
/**
* 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.
*/
"fireFocusEvents": boolean;
/** /**
* Returns the native `<input>` element used under the hood. * Returns the native `<input>` element used under the hood.
*/ */
@ -1132,10 +1128,6 @@ export namespace Components {
* If `true`, the user must fill in a value before submitting a form. * If `true`, the user must fill in a value before submitting a form.
*/ */
"required": boolean; "required": boolean;
/**
* Sets blur on the native `input` in `ion-input`. Use this method instead of the global `input.blur()`.
*/
"setBlur": () => Promise<void>;
/** /**
* Sets focus on the native `input` in `ion-input`. Use this method instead of the global `input.focus()`. * Sets focus on the native `input` in `ion-input`. Use this method instead of the global `input.focus()`.
*/ */
@ -2842,10 +2834,6 @@ export namespace Components {
* A hint to the browser for which enter key to display. Possible values: `"enter"`, `"done"`, `"go"`, `"next"`, `"previous"`, `"search"`, and `"send"`. * A hint to the browser for which enter key to display. Possible values: `"enter"`, `"done"`, `"go"`, `"next"`, `"previous"`, `"search"`, and `"send"`.
*/ */
"enterkeyhint"?: 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send'; "enterkeyhint"?: 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send';
/**
* 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.
*/
"fireFocusEvents": boolean;
/** /**
* Returns the native `<textarea>` element used under the hood. * Returns the native `<textarea>` element used under the hood.
*/ */
@ -2886,10 +2874,6 @@ export namespace Components {
* The number of visible text lines for the control. * The number of visible text lines for the control.
*/ */
"rows"?: number; "rows"?: number;
/**
* Sets blur on the native `textarea` in `ion-textarea`. Use this method instead of the global `textarea.blur()`.
*/
"setBlur": () => Promise<void>;
/** /**
* Sets focus on the native `textarea` in `ion-textarea`. Use this method instead of the global `textarea.focus()`. * Sets focus on the native `textarea` in `ion-textarea`. Use this method instead of the global `textarea.focus()`.
*/ */
@ -4990,10 +4974,6 @@ declare namespace LocalJSX {
* A hint to the browser for which enter key to display. Possible values: `"enter"`, `"done"`, `"go"`, `"next"`, `"previous"`, `"search"`, and `"send"`. * A hint to the browser for which enter key to display. Possible values: `"enter"`, `"done"`, `"go"`, `"next"`, `"previous"`, `"search"`, and `"send"`.
*/ */
"enterkeyhint"?: 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send'; "enterkeyhint"?: 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send';
/**
* 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.
*/
"fireFocusEvents"?: boolean;
/** /**
* A hint to the browser for which keyboard to display. Possible values: `"none"`, `"text"`, `"tel"`, `"url"`, `"email"`, `"numeric"`, `"decimal"`, and `"search"`. * A hint to the browser for which keyboard to display. Possible values: `"none"`, `"text"`, `"tel"`, `"url"`, `"email"`, `"numeric"`, `"decimal"`, and `"search"`.
*/ */
@ -6751,10 +6731,6 @@ declare namespace LocalJSX {
* A hint to the browser for which enter key to display. Possible values: `"enter"`, `"done"`, `"go"`, `"next"`, `"previous"`, `"search"`, and `"send"`. * A hint to the browser for which enter key to display. Possible values: `"enter"`, `"done"`, `"go"`, `"next"`, `"previous"`, `"search"`, and `"send"`.
*/ */
"enterkeyhint"?: 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send'; "enterkeyhint"?: 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send';
/**
* 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.
*/
"fireFocusEvents"?: boolean;
/** /**
* A hint to the browser for which keyboard to display. Possible values: `"none"`, `"text"`, `"tel"`, `"url"`, `"email"`, `"numeric"`, `"decimal"`, and `"search"`. * A hint to the browser for which keyboard to display. Possible values: `"none"`, `"text"`, `"tel"`, `"url"`, `"email"`, `"numeric"`, `"decimal"`, and `"search"`.
*/ */

View File

@ -31,16 +31,6 @@ export class Input implements ComponentInterface {
private inheritedAttributes: Attributes = {}; private inheritedAttributes: Attributes = {};
private isComposing = false; private isComposing = false;
/**
* 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; @State() hasFocus = false;
@Element() el!: HTMLElement; @Element() el!: HTMLElement;
@ -312,18 +302,6 @@ 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. * Returns the native `<input>` element used under the hood.
*/ */
@ -365,9 +343,7 @@ export class Input implements ComponentInterface {
this.focusChanged(); this.focusChanged();
this.emitStyle(); this.emitStyle();
if (this.fireFocusEvents) {
this.ionBlur.emit(ev); this.ionBlur.emit(ev);
}
}; };
private onFocus = (ev: FocusEvent) => { private onFocus = (ev: FocusEvent) => {
@ -375,9 +351,7 @@ export class Input implements ComponentInterface {
this.focusChanged(); this.focusChanged();
this.emitStyle(); this.emitStyle();
if (this.fireFocusEvents) {
this.ionFocus.emit(ev); this.ionFocus.emit(ev);
}
}; };
private onKeydown = (ev: KeyboardEvent) => { private onKeydown = (ev: KeyboardEvent) => {

View File

@ -37,7 +37,6 @@ import type { CounterFormatter } from './item-interface';
export class Item implements ComponentInterface, AnchorInterface, ButtonInterface { export class Item implements ComponentInterface, AnchorInterface, ButtonInterface {
private labelColorStyles = {}; private labelColorStyles = {};
private itemStyles = new Map<string, CssClassMap>(); private itemStyles = new Map<string, CssClassMap>();
private clickListener?: (ev: Event) => void;
@Element() el!: HTMLIonItemElement; @Element() el!: HTMLIonItemElement;
@ -205,25 +204,6 @@ export class Item implements ComponentInterface, AnchorInterface, ButtonInterfac
this.hasStartEl(); this.hasStartEl();
} }
componentDidUpdate() {
// Do not use @Listen here to avoid making all items
// appear as clickable to screen readers
// https://github.com/ionic-team/ionic-framework/issues/22011
const input = this.getFirstInput();
if (input && !this.clickListener) {
this.clickListener = (ev: Event) => this.delegateFocus(ev, input);
this.el.addEventListener('click', this.clickListener);
}
}
disconnectedCallback() {
const input = this.getFirstInput();
if (input && this.clickListener) {
this.el.removeEventListener('click', this.clickListener);
this.clickListener = undefined;
}
}
componentDidLoad() { componentDidLoad() {
raf(() => { raf(() => {
this.setMultipleInputs(); this.setMultipleInputs();
@ -287,33 +267,6 @@ export class Item implements ComponentInterface, AnchorInterface, ButtonInterfac
return inputs[0]; return inputs[0];
} }
// This is needed for WebKit due to a delegatesFocus bug where
// clicking on the left padding of an item is not focusing the input
// but is opening the keyboard. It will no longer be needed with
// iOS 14.
private delegateFocus(ev: Event, input: HTMLIonInputElement | HTMLIonTextareaElement) {
const clickedItem = (ev.target as HTMLElement).tagName === 'ION-ITEM';
let firstActive = false;
// If the first input is the same as the active element we need
// to focus the first input again, but if the active element
// is another input inside of the item we shouldn't switch focus
if (document.activeElement) {
firstActive = input.querySelector('input, textarea') === document.activeElement;
}
// Only focus the first input if we clicked on an ion-item
// and the first input exists
if (clickedItem && (firstActive || !this.multipleInputs)) {
input.fireFocusEvents = false;
input.setBlur();
input.setFocus();
raf(() => {
input.fireFocusEvents = true;
});
}
}
private updateCounterOutput(inputEl: HTMLIonInputElement | HTMLIonTextareaElement) { private updateCounterOutput(inputEl: HTMLIonInputElement | HTMLIonTextareaElement) {
const { counter, counterFormatter, defaultCounterFormatter } = this; const { counter, counterFormatter, defaultCounterFormatter } = this;
if (counter && !this.multipleInputs && inputEl?.maxlength !== undefined) { if (counter && !this.multipleInputs && inputEl?.maxlength !== undefined) {

View File

@ -25,16 +25,6 @@ export class Textarea implements ComponentInterface {
private textareaWrapper?: HTMLElement; private textareaWrapper?: HTMLElement;
private inheritedAttributes: Attributes = {}; private inheritedAttributes: Attributes = {};
/**
* 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;
@Element() el!: HTMLElement; @Element() el!: HTMLElement;
@State() hasFocus = false; @State() hasFocus = false;
@ -242,18 +232,6 @@ export class Textarea implements ComponentInterface {
} }
} }
/**
* Sets blur on the native `textarea` in `ion-textarea`. Use this method instead of the global
* `textarea.blur()`.
* @internal
*/
@Method()
async setBlur() {
if (this.nativeInput) {
this.nativeInput.blur();
}
}
/** /**
* Returns the native `<textarea>` element used under the hood. * Returns the native `<textarea>` element used under the hood.
*/ */
@ -332,18 +310,14 @@ export class Textarea implements ComponentInterface {
this.hasFocus = true; this.hasFocus = true;
this.focusChange(); this.focusChange();
if (this.fireFocusEvents) {
this.ionFocus.emit(ev); this.ionFocus.emit(ev);
}
}; };
private onBlur = (ev: FocusEvent) => { private onBlur = (ev: FocusEvent) => {
this.hasFocus = false; this.hasFocus = false;
this.focusChange(); this.focusChange();
if (this.fireFocusEvents) {
this.ionBlur.emit(ev); this.ionBlur.emit(ev);
}
}; };
private onKeyDown = () => { private onKeyDown = () => {

View File

@ -386,7 +386,6 @@ export const IonInfiniteScrollContent = /*@__PURE__*/ defineContainer<JSX.IonInf
export const IonInput = /*@__PURE__*/ defineContainer<JSX.IonInput>('ion-input', defineIonInput, [ export const IonInput = /*@__PURE__*/ defineContainer<JSX.IonInput>('ion-input', defineIonInput, [
'fireFocusEvents',
'color', 'color',
'accept', 'accept',
'autocapitalize', 'autocapitalize',
@ -781,7 +780,6 @@ export const IonText = /*@__PURE__*/ defineContainer<JSX.IonText>('ion-text', de
export const IonTextarea = /*@__PURE__*/ defineContainer<JSX.IonTextarea>('ion-textarea', defineIonTextarea, [ export const IonTextarea = /*@__PURE__*/ defineContainer<JSX.IonTextarea>('ion-textarea', defineIonTextarea, [
'fireFocusEvents',
'color', 'color',
'autocapitalize', 'autocapitalize',
'autofocus', 'autofocus',