fix: fixed Logistration page display issue

[sundasnoreen12]

Description

INF-1786

The email and password input fields on the login form are overlapping.
Expected Behaviour: When a user enters text into these fields, the entered characters should ideally replace any placeholder text.
Current Behaviour: Currently, the entered text overlaps the original placeholder input.

Solution

Fixed Logistration page display issue due to auto fill.

Merge Checklist

• If your update includes visual changes, have they been reviewed by a designer? Send them a link to the Sandbox, if applicable.
• Is there adequate test coverage for your changes?

Post-merge Checklist

• Deploy the changes to prod after verifying on stage or ask @openedx/2u-infinity to do it.
• 🎉 🙌 Celebrate! Thanks for your contribution.

[netlify]

✅ Deploy Preview for paragon-openedx-v22 ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	3ece978
🔍 Latest deploy log	https://app.netlify.com/sites/paragon-openedx-v22/deploys/67bf5e756dd56e000769d115
😎 Deploy Preview	https://deploy-preview-3451--paragon-openedx-v22.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 93.40%. Comparing base (5fb6c1d) to head (3ece978).

Additional details and impacted files

@@              Coverage Diff              @@
##           release-22.x    #3451   +/-   ##
=============================================
  Coverage         93.40%   93.40%           
=============================================
  Files               252      252           
  Lines              4534     4535    +1     
  Branches           1061     1025   -36     
=============================================
+ Hits               4235     4236    +1     
- Misses              292      296    +4     
+ Partials              7        3    -4     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[adamstankiewicz]

I'm having trouble replicating this issue. Can you outline some testing instructions to help reviewers replicate the issue? Presumably this is related to browsers' native auto-fill support of form fields, given the addition of an isAutoFill prop?

It would also be helpful to understand how the proposed isAutoFill prop is intended to be used, in context. For instance, when would the MFE pass isAutoFill vs. not including it, if this is related to browsers' native auto-fill support? For example, how would the MFE know when browsers' auto-fill is being used or not?

Using Chrome's auto-fill (see below screen recording), for example, when I hover over the password I want to auto-fill, I see that the auto-filled password overlays the input's placeholder label. However, when I apply the auto-fill, the Form.Control properly responds to having a new value, and the placeholder label properly moves to the top of the input field.

More generally, I'm also curious if you've dug into why hasValue might not be evaluating as truthy on its own for this use case, without the addition of an isAutoFill prop.

paragon_form_control_autofill_bug_replication_attempt.mov

[sundasnoreen12]

I'm having trouble replicating this issue. Can you outline some testing instructions to help reviewers replicate the issue? Presumably this is related to browsers' native auto-fill support of form fields, given the addition of an isAutoFill prop?

It would also be helpful to understand how the proposed isAutoFill prop is intended to be used, in context. For instance, when would the MFE pass isAutoFill vs. not including it, if this is related to browsers' native auto-fill support? For example, how would the MFE know when browsers' auto-fill is being used or not?

Using Chrome's auto-fill (see below screen recording), for example, when I hover over the password I want to auto-fill, I see that the auto-filled password overlays the input's placeholder label. However, when I apply the auto-fill, the Form.Control properly responds to having a new value, and the placeholder label properly moves to the top of the input field.

More generally, I'm also curious if you've dug into why hasValue might not be evaluating as truthy on its own for this use case, without the addition of an isAutoFill prop.

paragon_form_control_autofill_bug_replication_attempt.mov

Hi @adamstankiewicz ,

The issue occurs when a user has previously saved their email and password for the login screen. Upon refreshing the login page, the browser automatically fills in the saved credentials. However, since the page is not focused on load, the text and placeholders overlap. The issue resolves once the user clicks anywhere on the screen.

On initial page load, the tag does not have a value attribute until the user interacts with the page. The hasValue check does not evaluate as truthy in this scenario because its value depends on props.value. Since autofill populates the fields without triggering a focus event, props.value remains empty initially.

I am attaching the frontend PR (openedx/frontend-app-authn#1431) to provide more context on how we are passing the isAutoFill boolean variable.

Let me know if you have any further questions.