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

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

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

24
core/src/components.d.ts vendored
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"`.
*/
"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.
*/
@ -1132,10 +1128,6 @@ export namespace Components {
* If `true`, the user must fill in a value before submitting a form.
*/
"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()`.
*/
@ -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"`.
*/
"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.
*/
@ -2886,10 +2874,6 @@ export namespace Components {
* The number of visible text lines for the control.
*/
"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()`.
*/
@ -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"`.
*/
"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"`.
*/
@ -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"`.
*/
"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"`.
*/

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

@ -31,16 +31,6 @@ export class Input implements ComponentInterface {
private inheritedAttributes: Attributes = {};
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;
@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.
*/
@ -365,9 +343,7 @@ export class Input implements ComponentInterface {
this.focusChanged();
this.emitStyle();
if (this.fireFocusEvents) {
this.ionBlur.emit(ev);
}
this.ionBlur.emit(ev);
};
private onFocus = (ev: FocusEvent) => {
@ -375,9 +351,7 @@ export class Input implements ComponentInterface {
this.focusChanged();
this.emitStyle();
if (this.fireFocusEvents) {
this.ionFocus.emit(ev);
}
this.ionFocus.emit(ev);
};
private onKeydown = (ev: KeyboardEvent) => {

47
core/src/components/item/item.tsx
View File

@ -37,7 +37,6 @@ import type { CounterFormatter } from './item-interface';
export class Item implements ComponentInterface, AnchorInterface, ButtonInterface {
private labelColorStyles = {};
private itemStyles = new Map<string, CssClassMap>();
private clickListener?: (ev: Event) => void;
@Element() el!: HTMLIonItemElement;
@ -205,25 +204,6 @@ export class Item implements ComponentInterface, AnchorInterface, ButtonInterfac
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() {
raf(() => {
this.setMultipleInputs();
@ -287,33 +267,6 @@ export class Item implements ComponentInterface, AnchorInterface, ButtonInterfac
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) {
const { counter, counterFormatter, defaultCounterFormatter } = this;
if (counter && !this.multipleInputs && inputEl?.maxlength !== undefined) {

30
core/src/components/textarea/textarea.tsx
View File

@ -25,16 +25,6 @@ export class Textarea implements ComponentInterface {
private textareaWrapper?: HTMLElement;
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;
@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.
*/
@ -332,18 +310,14 @@ export class Textarea implements ComponentInterface {
this.hasFocus = true;
this.focusChange();
if (this.fireFocusEvents) {
this.ionFocus.emit(ev);
}
this.ionFocus.emit(ev);
};
private onBlur = (ev: FocusEvent) => {
this.hasFocus = false;
this.focusChange();
if (this.fireFocusEvents) {
this.ionBlur.emit(ev);
}
this.ionBlur.emit(ev);
};
private onKeyDown = () => {

2
packages/vue/src/proxies.ts
View File

@ -386,7 +386,6 @@ export const IonInfiniteScrollContent = /*@__PURE__*/ defineContainer<JSX.IonInf
export const IonInput = /*@__PURE__*/ defineContainer<JSX.IonInput>('ion-input', defineIonInput, [
'fireFocusEvents',
'color',
'accept',
'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, [
'fireFocusEvents',
'color',
'autocapitalize',
'autofocus',