fix(keyboard): restrict input lift to target android devices

src/hooks/use-keyboard-height/__tests__/environment.test.ts

@@ -1,6 +1,9 @@
 import { describe, expect, it } from "vitest";
 
-import { shouldEnableKeyboardAdaptation } from "../environment";
+import {
+  getKeyboardAdaptEnvironment,
+  shouldEnableKeyboardAdaptation,
+} from "../environment";
 import type { KeyboardAdaptEnvironment } from "../types";
 
 function makeEnvironment(
@@ -8,12 +11,12 @@ function makeEnvironment(
 ): KeyboardAdaptEnvironment {
   return {
     isAndroid: true,
+    isIOS: false,
     inAppBrowserName: "facebook",
     isXiaomiFamilyDevice: true,
     isOppoFamilyDevice: false,
     isFacebookInAppBrowser: true,
-    hasVisualViewport: true,
-    usesAndroidFacebookFallback: true,
+    isTargetAndroidFacebookDevice: true,
     ...overrides,
   };
 }
@@ -29,7 +32,7 @@ describe("shouldEnableKeyboardAdaptation", () => {
         makeEnvironment({
           isXiaomiFamilyDevice: false,
           isOppoFamilyDevice: true,
-          usesAndroidFacebookFallback: true,
+          isTargetAndroidFacebookDevice: true,
         }),
       ),
     ).toBe(true);
@@ -40,9 +43,10 @@ describe("shouldEnableKeyboardAdaptation", () => {
       shouldEnableKeyboardAdaptation(
         makeEnvironment({
           isAndroid: false,
+          isIOS: true,
           isXiaomiFamilyDevice: false,
           isOppoFamilyDevice: false,
-          usesAndroidFacebookFallback: false,
+          isTargetAndroidFacebookDevice: false,
         }),
       ),
     ).toBe(false);
@@ -52,7 +56,7 @@ describe("shouldEnableKeyboardAdaptation", () => {
         makeEnvironment({
           inAppBrowserName: "instagram",
           isFacebookInAppBrowser: false,
-          usesAndroidFacebookFallback: false,
+          isTargetAndroidFacebookDevice: false,
         }),
       ),
     ).toBe(false);
@@ -62,9 +66,55 @@ describe("shouldEnableKeyboardAdaptation", () => {
         makeEnvironment({
           isXiaomiFamilyDevice: false,
           isOppoFamilyDevice: false,
-          usesAndroidFacebookFallback: false,
+          isTargetAndroidFacebookDevice: false,
         }),
       ),
     ).toBe(false);
   });
+
+  it("disables for iOS Facebook even when Facebook IAB is detected", () => {
+    expect(
+      shouldEnableKeyboardAdaptation(
+        makeEnvironment({
+          isAndroid: false,
+          isIOS: true,
+          inAppBrowserName: "facebook",
+          isXiaomiFamilyDevice: false,
+          isOppoFamilyDevice: false,
+          isFacebookInAppBrowser: true,
+          isTargetAndroidFacebookDevice: false,
+        }),
+      ),
+    ).toBe(false);
+  });
+
+  it("does not trust target flag without the Android target device fields", () => {
+    expect(
+      shouldEnableKeyboardAdaptation(
+        makeEnvironment({
+          isAndroid: false,
+          isIOS: true,
+          isFacebookInAppBrowser: true,
+          isXiaomiFamilyDevice: true,
+          isTargetAndroidFacebookDevice: true,
+        }),
+      ),
+    ).toBe(false);
+  });
+
+  it("detects iPhone Facebook in-app browser as non-target environment", () => {
+    const environment = getKeyboardAdaptEnvironment(
+      "Mozilla/5.0 (iPhone; CPU iPhone OS 17_5 like Mac OS X) " +
+        "AppleWebKit/605.1.15 (KHTML, like Gecko) Mobile/15E148 " +
+        "[FBAN/FBIOS;FBAV/466.0.0.49.109;FBBV/605000000;FBDV/iPhone15,2]",
+    );
+
+    expect(environment).toMatchObject({
+      isAndroid: false,
+      isIOS: true,
+      isFacebookInAppBrowser: true,
+      isTargetAndroidFacebookDevice: false,
+    });
+    expect(shouldEnableKeyboardAdaptation(environment)).toBe(false);
+  });
 });

src/hooks/use-keyboard-height/constants.ts

@@ -1,4 +1,6 @@
 export const INPUT_LIFT_VAR = "--chat-input-lift";
+export const KEYBOARD_ADAPT_DATA_ATTR = "keyboardAdapt";
+export const KEYBOARD_ADAPT_TARGET_VALUE = "android-facebook-target";
 
 export const FOCUS_GAP_PX = 14;
 export const FALLBACK_INPUT_LIFT_PX = 320;

src/hooks/use-keyboard-height/css-vars.ts

@@ -1,9 +1,16 @@
-import { INPUT_LIFT_VAR } from "./constants";
+import {
+  INPUT_LIFT_VAR,
+  KEYBOARD_ADAPT_DATA_ATTR,
+  KEYBOARD_ADAPT_TARGET_VALUE,
+} from "./constants";
 
 export function setInputLiftVar(lift: number): void {
   document.documentElement.style.setProperty(INPUT_LIFT_VAR, `${lift}px`);
+  document.documentElement.dataset[KEYBOARD_ADAPT_DATA_ATTR] =
+    KEYBOARD_ADAPT_TARGET_VALUE;
 }
 
 export function resetInputLiftVar(): void {
   document.documentElement.style.setProperty(INPUT_LIFT_VAR, "0px");
+  delete document.documentElement.dataset[KEYBOARD_ADAPT_DATA_ATTR];
 }

src/hooks/use-keyboard-height/environment.ts

@@ -10,25 +10,30 @@ export function getKeyboardAdaptEnvironment(
   const isXiaomiFamilyDevice = PlatformDetector.isXiaomiFamilyDevice(ua);
   const isOppoFamilyDevice = PlatformDetector.isOppoFamilyDevice(ua);
   const isFacebookInAppBrowser = BrowserDetector.isFacebookInAppBrowser(ua);
-  const usesAndroidFacebookFallback =
+  const isTargetAndroidFacebookDevice =
     platform.isAndroid &&
+    !platform.isIOS &&
     (isXiaomiFamilyDevice || isOppoFamilyDevice) &&
     isFacebookInAppBrowser;
 
   return {
     isAndroid: platform.isAndroid,
+    isIOS: platform.isIOS,
     inAppBrowserName: browser.inAppBrowserName,
     isXiaomiFamilyDevice,
     isOppoFamilyDevice,
     isFacebookInAppBrowser,
-    hasVisualViewport:
-      typeof window !== "undefined" && window.visualViewport != null,
-    usesAndroidFacebookFallback,
+    isTargetAndroidFacebookDevice,
   };
 }
 
 export function shouldEnableKeyboardAdaptation(
   environment: KeyboardAdaptEnvironment,
 ): boolean {
-  return environment.usesAndroidFacebookFallback;
+  return (
+    environment.isAndroid &&
+    !environment.isIOS &&
+    environment.isFacebookInAppBrowser &&
+    (environment.isXiaomiFamilyDevice || environment.isOppoFamilyDevice)
+  );
 }

src/hooks/use-keyboard-height/types.ts

@@ -7,10 +7,10 @@ export interface UseKeyboardHeightOptions {
 
 export interface KeyboardAdaptEnvironment {
   isAndroid: boolean;
+  isIOS: boolean;
   inAppBrowserName: string | null;
   isXiaomiFamilyDevice: boolean;
   isOppoFamilyDevice: boolean;
   isFacebookInAppBrowser: boolean;
-  hasVisualViewport: boolean;
-  usesAndroidFacebookFallback: boolean;
+  isTargetAndroidFacebookDevice: boolean;
 }