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

liamdebeasi · web-flow · commit ee3467c9f1aa · 2022-08-25T12:34:25.000-04:00
diff --git a/core/src/components.d.ts b/core/src/components.d.ts
@@ -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"`.
          */
diff --git a/core/src/components/input/input.tsx b/core/src/components/input/input.tsx
@@ -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,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) => {
diff --git a/core/src/components/item/item.tsx b/core/src/components/item/item.tsx
@@ -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) {
diff --git a/core/src/components/textarea/textarea.tsx b/core/src/components/textarea/textarea.tsx
@@ -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 = () => {
diff --git a/packages/vue/src/proxies.ts b/packages/vue/src/proxies.ts
@@ -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',
