mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-16 10:01:59 +08:00
perf(item): remove delegatesFocus patch for iOS 13 (#25822)
This commit is contained in:
24
core/src/components.d.ts
vendored
24
core/src/components.d.ts
vendored
@ -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"`.
|
||||||
*/
|
*/
|
||||||
|
@ -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) => {
|
||||||
|
@ -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) {
|
||||||
|
@ -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 = () => {
|
||||||
|
@ -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',
|
||||||
|
Reference in New Issue
Block a user