[HOLD for payment 2023-12-15] [$500] mWeb/Chrome - Login - Input field on Login page gets white background after using auto-fill #31415
Comments
lanitochka17
added
External
melvin-bot
bot
changed the title
|
Job added to Upwork: https://www.upwork.com/jobs/~0103638f798337746d |
|
Triggered auto assignment to @jliexpensify ( |
melvin-bot
bot
added
the
Help Wanted
Bug0 Triage Checklist (Main S/O)
|
|
Triggered auto assignment to Contributor-plus team member for initial proposal review - @parasharrajat ( |
ProposalPlease re-state the problem that we are trying to solve in this issue.mWeb/Chrome - Login - Input field on Login page gets white background after using auto-fill What is the root cause of that problem?The mobile Chrome on iOS appears to use iOS's WKWebView, and WKWebView doesn't support non-standard webkit features. The support for WebKit feature is supported by the Blink engine, which is Chrome's rendering engine, that the reason we are seeing this behavior on iOS mWeb Chrome. Although the WKWebView supports some non-standard like the autofill, the Browser doesn't apply the CSS autofill pseudo-class to mark the field as auto-filled, that is the reason the styles below are not applied to the field. Lines 76 to 89 in 91ef640 The W3C standards (here) only has the standards related to the autofill property ( Each browser has its technics to apply the styles for the auto-filled fields, usually in desktop browsers and some Mobile browsers is applied the styles using the autofill pseudo-class, in the mobile browsers which doesn't apply the CSS autofill pseudo-class, usually is added a custom attribute in the field to apply their styles (IOS Chrome, Android Browsers). What changes do you think we should make in order to solve the problem?Unfortunately for iOS mWeb Chrome and other WebView browsers we can't use only CSS to reset the Browser styles for auto-filled fields. We should create a polyfill mechanism to provide the autofill styles for the input when the browsers can't apply the CSS autofill pseudo-class. To provide the autofill styles (polyfill) we can create a custom hook which will responsible the return the autofill styles when the input is auto-filled and the browsers can't apply the CSS autofill pseudo-class. For example, const hasBrowserAutoFillStyles = ({initialStyles, input}) => {
const currentInputStyles = getComputedStyle(input);
return initialStyles.backgroundColor !== currentInputStyles.backgroundColor
}
const shouldApplyAutoFill = (autoFillContext) => {
const {currentValue, previousValue, initialStyles, input} = autoFillContext;
if (_.isEmpty(initialStyles) || !input) {
return false;
}
const currentInputStyles = getComputedStyle(input);
const digitDifference = currentValue.length - previousValue.length;
return digitDifference > 1 || isInputAutoFilled(input) || hasBrowserAutoFillStyles(autoFillContext);
};
const useAutoFillStyles = (input) => {
const styles = useThemeStyles();
const currentValue = lodashGet(input, 'value', '');
const previousValue = usePrevious(currentValue);
const initialStyles = useMemo(() => {
if (input) {
const inputStyles = getComputedStyle(input);
return {
backgroundColor: inputStyles.backgroundColor,
};
}
return {};
}, [input]);
const autoFillContext = {
currentValue,
previousValue,
initialStyles,
input,
};
return shouldApplyAutoFill(autoFillContext) ? styles.textInputAutofill : {};
};We need to add autofill styles in the file styles.ts textInputAutofill: {
WebkitBackgroundClip: 'text',
WebkitTextFillColor: '#ffffff',
caretColor: '#ffffff',
},What alternative solutions did you explore? (Optional)N/A |
|
I couldn't reproduce on a real device. @lanitochka17 @jliexpensify |
|
@parasharrajat I don't have an Apple phone but I asked a colleague for the most recent version of iOS Chrome and she said it was 1.3.99 - I'm wondering if you're on that version and maybe that's why you can't repro? |
|
OK, I can reproduce it now. We don't have to create a prop for applying autofill styles. I think we want this behavior to be applied everywhere. I noticed that Chrome applied Thus we can just add style rules for it. @wlegolas How can we solve this problem in a standard way? Also, the problem was reported on Chrome iOS and your POC is created on the web. |
|
Triggered auto assignment to @neil-marcellini, see https://stackoverflow.com/c/expensify/questions/7972 for more details. |
|
Taking my decision back until we finalize the proposal. |
|
Waiting for more proposals which try to solve the problem for all types of autofills. |
Hi @parasharrajat, thank you for testing and letting me know about the behavior. In my point of view, the main problem is that the mobile Chrome on iOS appears to use iOS's WKWebView, and WKWebView doesn't support non-standard webkit features. The support for WebKit feature is supported by the Blink engine, which is Chrome's rendering engine, that is the reason we are seeing this behavior on iOS mWeb Chrome. WKWebView only supports features available to iOS Safari, if you see in the autofill support, we can see for "Safari on iOS" since version 15 this engine supports the CSS selector Unfortunately, I didn't have an iPhone to test it right now, that is the reason I tested using the Web browser to simulate the autofill using the plugin from my browser. My thought is using I updated my proposal with the changes that should fix this behavior. I'll test my proposal using Chrome on iOS and I'll bring the results. |
ProposalPlease re-state the problem that we are trying to solve in this issue.Email is entered but login field now has a white background What is the root cause of that problem?Chrome on iOS does not support the What changes do you think we should make in order to solve the problem?Rely on the to before this line For that new block, the logic is the same as what we have here, just that In here, we should add What alternative solutions did you explore? (Optional)We can optionally add a group of selectors with the I'm not sure if we provide standard support for browsers aside from Safari and Chrome, but if we do, might worth double check for those browser as well and apply the same method, if there's such browser with same issue, it will most likely add a prop to the input similar to the "chrome-autofilled". From my testing, Firefox does not seem to support autofill on iOS so doesn't have this problem. |
|
@jliexpensify I'm going to make you the internal owner of this issue until we actually have proposal to review. |
|
@tienifr Web is open so we can't control the browsers users are using. We mainly focus on Chrome and Safari during testing as they are most used but solutions should always target all common platforms. From standard, I meant to say support autofill across platforms. What if a different attribute is used for chrome on Android etc? What if the What does W3C say the standard is for autofill? |
|
@parasharrajat, @neil-marcellini, @jliexpensify Uh oh! This issue is overdue by 2 days. Don't forget to update your issues! |
Proposal |
|
Hi @parasharrajat I tested my first proposal using only the autofill pseudo-class and didn't work for IOS Chrome. After some studies, I realized that we can't fix this behavior only using CSS. I updated my proposal with the changes to bring the autofill styles for Browsers that don't apply the autofill pseudo-class in the auto-filled field. |
|
Not overdue, Rajat is looking at proposals. |
|
📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸 |
Sounds good, assigning @tienifr |
melvin-bot
bot
removed
the
Help Wanted
|
📣 @parasharrajat Please request via NewDot manual requests for the Reviewer role ($500) |
|
📣 @tienifr 🎉 An offer has been automatically sent to your Upwork account for the Contributor role 🎉 Thanks for contributing to the Expensify app! Offer link |
|
@parasharrajat @neil-marcellini @jliexpensify @tienifr this issue was created 2 weeks ago. Are we close to approving a proposal? If not, what's blocking us from getting this issue assigned? Don't hesitate to create a thread in #expensify-open-source to align faster in real time. Thanks! |
1 similar comment
|
@parasharrajat @neil-marcellini @jliexpensify @tienifr this issue was created 2 weeks ago. Are we close to approving a proposal? If not, what's blocking us from getting this issue assigned? Don't hesitate to create a thread in #expensify-open-source to align faster in real time. Thanks! |
|
Damn Melvin, calm down. |
melvin-bot
bot
added
Reviewing
melvin-bot
bot
changed the title
|
|
|
The solution for this issue has been 🚀 deployed to production 🚀 in version 1.4.9-5 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue: If no regressions arise, payment will be issued on 2023-12-15. 🎊 After the hold period is over and BZ checklist items are completed, please complete any of the applicable payments for this issue, and check them off once done.
For reference, here are some details about the assignees on this issue:
|
|
BugZero Checklist: The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed:
|
|
Bump @parasharrajat to complete the checklist |
|
BugZero Checklist: The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed:
Regression Test StepsOn mWeb-Chrome
Do you agree 👍 or 👎 ? |
|
Payment Summary
|
|
Paid and job closed! |
|
Payment requested as per #31415 (comment) |
|
$500 approved for @parasharrajat |
If you haven’t already, check out our contributing guidelines for onboarding and email [email protected] to request to join our Slack channel!
Version Number: 1.4.0-0
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught during regression testing, add the test name, ID and link from TestRail:
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Expensify/Expensify Issue URL:
Issue reported by: Applause - Internal Team
Slack conversation:
Action Performed:
Expected Result:
Email is entered with no problem
Actual Result:
Email is entered but login field now has a white background
Workaround:
Unknown
Platforms:
Which of our officially supported platforms is this issue occurring on?
Screenshots/Videos
Add any screenshot/video evidence
Bug6278465_1700100200447.RPReplay_Final1700088873.mp4
View all open jobs on GitHub
Upwork Automation - Do Not Edit
Issue Owner
Current Issue Owner: @jliexpensifyThe text was updated successfully, but these errors were encountered: