Merge pull request Expensify#51117 from klajdipaja/issues/sign_in_dark_autofill_style

add extra css selector to global autofill style -add css class to the…

Author: thienlnam

src/libs/DomUtils/index.ts

@@ -34,25 +34,25 @@ const addCSS = (css: string, styleId: string) => {
  * Chrome on iOS does not support the autofill pseudo class because it is a non-standard webkit feature.
  * We should rely on the chrome-autofilled property being added to the input when users use auto-fill
  */
-const getAutofilledInputStyle = (inputTextColor: string) => `
-    input[chrome-autofilled],
-    input[chrome-autofilled]:hover,
-    input[chrome-autofilled]:focus,
-    textarea[chrome-autofilled],
-    textarea[chrome-autofilled]:hover,
-    textarea[chrome-autofilled]:focus,
-    select[chrome-autofilled],
-    select[chrome-autofilled]:hover,
-    select[chrome-autofilled]:focus,
-    input:-webkit-autofill,
-    input:-webkit-autofill:hover,
-    input:-webkit-autofill:focus,
-    textarea:-webkit-autofill,
-    textarea:-webkit-autofill:hover,
-    textarea:-webkit-autofill:focus,
-    select:-webkit-autofill,
-    select:-webkit-autofill:hover,
-    select:-webkit-autofill:focus {
+const getAutofilledInputStyle = (inputTextColor: string, cssSelector = '') => `
+   ${cssSelector} input[chrome-autofilled],
+    ${cssSelector} input[chrome-autofilled]:hover,
+    ${cssSelector} input[chrome-autofilled]:focus,
+    ${cssSelector} textarea[chrome-autofilled],
+    ${cssSelector}  textarea[chrome-autofilled]:hover,
+    ${cssSelector} textarea[chrome-autofilled]:focus,
+    ${cssSelector} select[chrome-autofilled],
+    ${cssSelector} select[chrome-autofilled]:hover,
+    ${cssSelector} select[chrome-autofilled]:focus,
+    ${cssSelector} input:-webkit-autofill,
+    ${cssSelector} input:-webkit-autofill:hover,
+    ${cssSelector} input:-webkit-autofill:focus,
+    ${cssSelector} textarea:-webkit-autofill,
+    ${cssSelector} textarea:-webkit-autofill:hover,
+    ${cssSelector} textarea:-webkit-autofill:focus,
+    ${cssSelector} select:-webkit-autofill,
+    ${cssSelector} select:-webkit-autofill:hover,
+    ${cssSelector} select:-webkit-autofill:focus {
         -webkit-background-clip: text;
         -webkit-text-fill-color: ${inputTextColor};
         caret-color: ${inputTextColor};

src/pages/signin/SignInPageLayout/index.tsx

@@ -15,6 +15,10 @@ import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import * as Browser from '@libs/Browser';
+import DomUtils from '@libs/DomUtils';
+import getPlatform from '@libs/getPlatform';
+// eslint-disable-next-line no-restricted-imports
+import themes from '@styles/theme';
 import variables from '@styles/variables';
 import CONST from '@src/CONST';
 import BackgroundImage from './BackgroundImage';
@@ -81,6 +85,27 @@ function SignInPageLayout(
 
     const backgroundImageHeight = Math.max(variables.signInContentMinHeight, containerHeight);
 
+    /*
+    SignInPageLayout always has a dark theme regardless of the app theme. ThemeProvider sets auto-fill input styles globally so different ThemeProviders conflict and auto-fill input styles are incorrectly applied for this component.
+    Add a class to `body` when this component stays mounted and remove it when the component dismounts.
+    A new styleID is added with dark theme text with more specific css selector using this added cssClass.
+    */
+    const cssClass = 'sign-in-page-layout';
+    DomUtils.addCSS(DomUtils.getAutofilledInputStyle(themes[CONST.THEME.DARK].text, `.${cssClass}`), 'sign-in-autofill-input');
+
+    useEffect(() => {
+        const isWeb = getPlatform() === CONST.PLATFORM.WEB;
+        const isDesktop = getPlatform() === CONST.PLATFORM.DESKTOP;
+        if (!isWeb && !isDesktop) {
+            return;
+        }
+        // add css class to body only for web and desktop
+        document.body.classList.add(cssClass);
+        return () => {
+            document.body.classList.remove(cssClass);
+        };
+    }, []);
+
     return (
         <View style={containerStyles}>
             {!shouldUseNarrowLayout ? (