Merge remote-tracking branch 'origin/main' into sync-7-11-15-22

core/src/utils/animation/animation.ts

@@ -908,8 +908,6 @@ export const createAnimation = (animationId?: string): Animation => {
          * may be flickering if a new
          * animation is started on the same
          * element too quickly
-         *
-         * TODO: Is there a cleaner way to do this?
          */
         raf(() => {
           clearCSSAnimationPlayState();

core/src/utils/animation/cubic-bezier.ts

@@ -2,7 +2,6 @@
  * Based on:
  * https://stackoverflow.com/questions/7348009/y-coordinate-for-a-given-x-cubic-bezier
  * https://math.stackexchange.com/questions/26846/is-there-an-explicit-form-for-cubic-b%C3%A9zier-curves
- * TODO: Reduce rounding error
  */
 
 /**

core/src/utils/element-interface.ts

@@ -1,6 +1,3 @@
-// import { RouterDirection } from '../interface';
-
-// TODO router direction
 // The interfaces in this file are used to make sure our components
 // have the correct properties defined that are needed to pass to
 // the native HTML elements they render
@@ -10,11 +7,9 @@ export interface AnchorInterface {
   target: string | undefined;
   rel: string | undefined;
   download: string | undefined;
-  // routerDirection: RouterDirection;
 }
 
 export interface ButtonInterface {
   type: 'submit' | 'reset' | 'button';
   disabled: boolean;
-  // routerDirection: RouterDirection;
 }

core/src/utils/gesture/swipe-back.ts

@@ -66,11 +66,6 @@ export const createSwipeBackGesture = (
       realDur = Math.min(dur, 540);
     }
 
-    /**
-     * TODO: stepValue can sometimes return negative values
-     * or values greater than 1 which should not be possible.
-     * Need to investigate more to find where the issue is.
-     */
     onEndHandler(shouldComplete, stepValue <= 0 ? 0.01 : clamp(0, stepValue, 0.9999), realDur);
   };
 

core/src/utils/input-shims/hacks/common.ts

@@ -4,14 +4,15 @@ export const relocateInput = (
   componentEl: HTMLElement,
   inputEl: HTMLInputElement | HTMLTextAreaElement,
   shouldRelocate: boolean,
-  inputRelativeY = 0
+  inputRelativeY = 0,
+  disabledClonedInput = false
 ) => {
   if (cloneMap.has(componentEl) === shouldRelocate) {
     return;
   }
 
   if (shouldRelocate) {
-    addClone(componentEl, inputEl, inputRelativeY);
+    addClone(componentEl, inputEl, inputRelativeY, disabledClonedInput);
   } else {
     removeClone(componentEl, inputEl);
   }
@@ -24,7 +25,8 @@ export const isFocused = (input: HTMLInputElement | HTMLTextAreaElement): boolea
 const addClone = (
   componentEl: HTMLElement,
   inputEl: HTMLInputElement | HTMLTextAreaElement,
-  inputRelativeY: number
+  inputRelativeY: number,
+  disabledClonedInput = false
 ) => {
   // this allows for the actual input to receive the focus from
   // the user's touch event, but before it receives focus, it
@@ -38,9 +40,25 @@ const addClone = (
   const parentEl = inputEl.parentNode!;
 
   // DOM WRITES
-  const clonedEl = inputEl.cloneNode(false) as HTMLElement;
+  const clonedEl = inputEl.cloneNode(false) as HTMLInputElement | HTMLTextAreaElement;
   clonedEl.classList.add('cloned-input');
   clonedEl.tabIndex = -1;
+
+  /**
+   * Making the cloned input disabled prevents
+   * Chrome for Android from still scrolling
+   * the entire page since this cloned input
+   * will briefly be hidden by the keyboard
+   * even though it is not focused.
+   *
+   * This is not needed on iOS. While this
+   * does not cause functional issues on iOS,
+   * the input still appears slightly dimmed even
+   * if we set opacity: 1.
+   */
+  if (disabledClonedInput) {
+    clonedEl.disabled = true;
+  }
   parentEl.appendChild(clonedEl);
   cloneMap.set(componentEl, clonedEl);
 

core/src/utils/input-shims/hacks/input-blurring.ts

@@ -41,7 +41,7 @@ export const enableInputBlurring = () => {
     }
 
     focused = false;
-    // TODO: find a better way, why 50ms?
+    // TODO FW-2796: find a better way, why 50ms?
     setTimeout(() => {
       if (!focused) {
         active.blur();

core/src/utils/input-shims/hacks/scroll-assist.ts

@@ -16,7 +16,8 @@ export const enableScrollAssist = (
   footerEl: HTMLIonFooterElement | null,
   keyboardHeight: number,
   enableScrollPadding: boolean,
-  keyboardResize: KeyboardResizeOptions | undefined
+  keyboardResize: KeyboardResizeOptions | undefined,
+  disableClonedInput = false
 ) => {
   /**
    * Scroll padding should only be added if:
@@ -36,7 +37,7 @@ export const enableScrollAssist = (
    * mobile Safari from adjusting the viewport.
    */
   const focusIn = async () => {
-    jsSetFocus(componentEl, inputEl, contentEl, footerEl, keyboardHeight, addScrollPadding);
+    jsSetFocus(componentEl, inputEl, contentEl, footerEl, keyboardHeight, addScrollPadding, disableClonedInput);
   };
   componentEl.addEventListener('focusin', focusIn, true);
 
@@ -51,7 +52,8 @@ const jsSetFocus = async (
   contentEl: HTMLElement | null,
   footerEl: HTMLIonFooterElement | null,
   keyboardHeight: number,
-  enableScrollPadding: boolean
+  enableScrollPadding: boolean,
+  disableClonedInput = false
 ) => {
   if (!contentEl && !footerEl) {
     return;
@@ -84,7 +86,7 @@ const jsSetFocus = async (
   // temporarily move the focus to the focus holder so the browser
   // doesn't freak out while it's trying to get the input in place
   // at this point the native text input still does not have focus
-  relocateInput(componentEl, inputEl, true, scrollData.inputSafeY);
+  relocateInput(componentEl, inputEl, true, scrollData.inputSafeY, disableClonedInput);
   inputEl.focus();
 
   /**

core/src/utils/input-shims/input-shims.ts

@@ -11,12 +11,20 @@ const INPUT_BLURRING = true;
 const SCROLL_ASSIST = true;
 const HIDE_CARET = true;
 
-export const startInputShims = async (config: Config) => {
+export const startInputShims = async (config: Config, platform: 'ios' | 'android') => {
   const doc = document;
+  const isIOS = platform === 'ios';
+  const isAndroid = platform === 'android';
+
+  /**
+   * Hide Caret and Input Blurring are needed on iOS.
+   * Scroll Assist and Scroll Padding are needed on iOS and Android
+   * with Chrome web browser (not Chrome webview).
+   */
   const keyboardHeight = config.getNumber('keyboardHeight', 290);
   const scrollAssist = config.getBoolean('scrollAssist', true);
-  const hideCaret = config.getBoolean('hideCaretOnScroll', true);
-  const inputBlurring = config.getBoolean('inputBlurring', true);
+  const hideCaret = config.getBoolean('hideCaretOnScroll', isIOS);
+  const inputBlurring = config.getBoolean('inputBlurring', isIOS);
   const scrollPadding = config.getBoolean('scrollPadding', true);
   const inputs = Array.from(doc.querySelectorAll('ion-input, ion-textarea')) as HTMLElement[];
 
@@ -71,7 +79,8 @@ export const startInputShims = async (config: Config) => {
         footerEl,
         keyboardHeight,
         scrollPadding,
-        keyboardResizeMode
+        keyboardResizeMode,
+        isAndroid
       );
       scrollAssistMap.set(componentEl, rmFn);
     }