Skip to content

Commit

Permalink
perf(item): remove delegatesFocus patch for iOS 13 (#25822)
Browse files Browse the repository at this point in the history
  • Loading branch information
@liamdebeasi
liamdebeasi committed Aug 25, 2022
1 parent 1eb6fd0 commit ee3467c
Show file tree
Hide file tree
Showing 5 changed files with 4 additions and 129 deletions.
24 changes: 0 additions & 24 deletions core/src/components.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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.
*/
Expand Down Expand Up @@ -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()`.
*/
Expand Down Expand Up @@ -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.
*/
Expand Down Expand Up @@ -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()`.
*/
Expand Down Expand Up @@ -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"`.
*/
Expand Down Expand Up @@ -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"`.
*/
Expand Down
30 changes: 2 additions & 28 deletions core/src/components/input/input.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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.
*/
Expand Down Expand Up @@ -365,19 +343,15 @@ export class Input implements ComponentInterface {
this.focusChanged();
this.emitStyle();

if (this.fireFocusEvents) {
this.ionBlur.emit(ev);
}
this.ionBlur.emit(ev);
};

private onFocus = (ev: FocusEvent) => {
this.hasFocus = true;
this.focusChanged();
this.emitStyle();

if (this.fireFocusEvents) {
this.ionFocus.emit(ev);
}
this.ionFocus.emit(ev);
};

private onKeydown = (ev: KeyboardEvent) => {
Expand Down
47 changes: 0 additions & 47 deletions core/src/components/item/item.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;

Expand Down Expand Up @@ -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();
Expand Down Expand Up @@ -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) {
Expand Down
30 changes: 2 additions & 28 deletions core/src/components/textarea/textarea.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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.
*/
Expand Down Expand Up @@ -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 = () => {
Expand Down
2 changes: 0 additions & 2 deletions packages/vue/src/proxies.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down Expand Up @@ -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',
Expand Down

0 comments on commit ee3467c

Please sign in to comment.