Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Aug 25, 2022
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
7464669
perf(item): remove delegatesFocus patch for iOS 13
liamdebeasi Aug 25, 2022
f0c0fd5
Merge branch 'feature-7.0' into FW-1538
liamdebeasi Aug 25, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 0 additions & 24 deletions core/src/components.d.ts
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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