fix: make autofill work for controlled input in Firefox #2698

pudek357 · 2022-04-28T03:17:44Z

Description

There is an issue in React that breaks Firefox browser behavior for autofill/autocomplete in controlled inputs.
mui/material-ui#16943
facebook/react#15739
facebook/react#18986

The solution is taken from one of the comment:
facebook/react#18986 (comment)

How to test

open Firefox
go to https://codesandbox.io/s/withered-worker-0njelw (latest Picasso)
add some values for plain and controlled Picasso input and submit the form
check autofill for each input, you will notice that Picasso input will not have any autofill options
firefox_ntFge3HuoA_Trim.mp4
go to https://picasso.toptal.net/SPT-2611-fix-autofill-for-firefox/?path=/story/picasso-forms-final-form--final-form
edit code

Use this code to test it:

function App() {
  const onSubmit = async (values: any, form: any) => {
    form.submit();
    return new Promise((resolve) => setTimeout(resolve, 100));
  };

  return (
    <Picasso>
      <Container flex direction="column" alignItems="center" top="medium">
        <Form onSubmit={onSubmit}>
          <Container bottom="small">
            <input
              type="text"
              name="plainInput_PicassoWithFix"
              autoComplete="on"
            />
          </Container>

          <Container bottom="small">
            <Form.Input
              type="text"
              name="controlledInput_PicassoWithFix"
              autoComplete="on"
            />
          </Container>

          <Form.SubmitButton>submit</Form.SubmitButton>
        </Form>
      </Container>
    </Picasso>
  );
}

add some values for plain and controlled Picasso input and submit the form
check autofill for each input
autofill should work for both inputs

Development checks

Add changeset according to guidelines (if needed)
Read CONTRIBUTING.md and Component API principles
n/a Annotate all props in component with documentation
n/a Create examples for component
n/a Ensure that deployed demo has expected results and good examples
Ensure that tests pass by running yarn test
Ensure that visuals tests pass by running yarn test:visual. If not - check the documentation how to fix visual tests
Ensure the changed/created components have not caused accessibility issues. How to use accessibility plugin in storybook.
Self reviewed
n/a Covered with tests

Breaking change

n/a codemod is created
n/a test alpha package of Picasso in StaffPortal

PR commands

List of available commands:

@toptal-bot run all - Run whole pipeline
@toptal-bot run build - Check build
@toptal-bot run visual - Run visual tests
@toptal-bot run deploy:documentation - Deploy documentation
@toptal-bot run package:alpha-release - Release alpha version

PR Review Guidelines

When to approve? ✅

You are OK with merging this PR and

You have no extra requests.
You have optional requests.
1. Add nit: to your comment. (ex. nit: I'd rename this variable from makeCircle to getCircle)

When to request changes? ❌

You are not OK with merging this PR because

Something is broken after the changes.
Acceptance criteria is not reached.
Code is dirty.

When to comment (neither ✅ nor ❌)

You want your comments to be addressed before merging this PR in cases like:

There are leftovers like unnecessary logs, comments, etc.
You have an opinionated comment regarding the code that requires a discussion.
You have questions.

How to handle the comments?

An owner of a comment is the only one who can resolve it.
An owner of a comment must resolve it when it's addressed.
A PR owner must reply with ✅ when a comment is addressed.

changeset-bot · 2022-04-28T03:17:47Z

🦋 Changeset detected

Latest commit: 4a53f8a

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@toptal/picasso-forms	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

toptal-devbot · 2022-04-28T03:21:00Z

Your alpha package is ready 🎉
yarn add @toptal/picasso-charts@35.1.2-alpha-SPT-2611-fix-autofill-for-firefox.26
yarn add @toptal/picasso-codemod@5.2.1-alpha-SPT-2611-fix-autofill-for-firefox.36
yarn add @toptal/picasso-forms@42.2.1-alpha-SPT-2611-fix-autofill-for-firefox.13
yarn add @toptal/picasso-provider@1.1.1-alpha-SPT-2611-fix-autofill-for-firefox.36
yarn add @toptal/picasso@22.3.2-alpha-SPT-2611-fix-autofill-for-firefox.3
yarn add @toptal/picasso-shared@8.1.1-alpha-SPT-2611-fix-autofill-for-firefox.36
yarn add @topkit/analytics-charts@32.1.1-alpha-SPT-2611-fix-autofill-for-firefox.36

toptal-devbot · 2022-04-28T04:38:35Z

Your alpha package is ready 🎉
yarn add @toptal/picasso-charts@35.1.2-alpha-SPT-2611-fix-autofill-for-firefox.27
yarn add @toptal/picasso-codemod@5.2.1-alpha-SPT-2611-fix-autofill-for-firefox.37
yarn add @toptal/picasso-forms@42.2.1-alpha-SPT-2611-fix-autofill-for-firefox.14
yarn add @toptal/picasso-provider@1.1.1-alpha-SPT-2611-fix-autofill-for-firefox.37
yarn add @toptal/picasso@22.3.2-alpha-SPT-2611-fix-autofill-for-firefox.4
yarn add @toptal/picasso-shared@8.1.1-alpha-SPT-2611-fix-autofill-for-firefox.37
yarn add @topkit/analytics-charts@32.1.1-alpha-SPT-2611-fix-autofill-for-firefox.37

toptal-devbot · 2022-04-28T06:43:02Z

Your alpha package is ready 🎉
yarn add @toptal/picasso-charts@35.1.2-alpha-SPT-2611-fix-autofill-for-firefox.28
yarn add @toptal/picasso-codemod@5.2.1-alpha-SPT-2611-fix-autofill-for-firefox.38
yarn add @toptal/picasso-forms@42.2.1-alpha-SPT-2611-fix-autofill-for-firefox.15
yarn add @toptal/picasso-provider@1.1.1-alpha-SPT-2611-fix-autofill-for-firefox.38
yarn add @toptal/picasso@22.3.2-alpha-SPT-2611-fix-autofill-for-firefox.5
yarn add @toptal/picasso-shared@8.1.1-alpha-SPT-2611-fix-autofill-for-firefox.38
yarn add @topkit/analytics-charts@32.1.1-alpha-SPT-2611-fix-autofill-for-firefox.38

toptal-devbot · 2022-04-28T10:39:58Z

Your alpha package is ready 🎉
yarn add @toptal/picasso-charts@35.1.2-alpha-SPT-2611-fix-autofill-for-firefox.30
yarn add @toptal/picasso-codemod@5.2.1-alpha-SPT-2611-fix-autofill-for-firefox.40
yarn add @toptal/picasso-forms@42.2.1-alpha-SPT-2611-fix-autofill-for-firefox.17
yarn add @toptal/picasso-provider@1.1.1-alpha-SPT-2611-fix-autofill-for-firefox.40
yarn add @toptal/picasso@22.3.2-alpha-SPT-2611-fix-autofill-for-firefox.7
yarn add @toptal/picasso-shared@8.1.1-alpha-SPT-2611-fix-autofill-for-firefox.40
yarn add @topkit/analytics-charts@32.1.1-alpha-SPT-2611-fix-autofill-for-firefox.40

toptal-devbot · 2022-04-28T14:58:47Z

Greetings from FX team, @pudek357 👋

Thank you so much for contributing 🙇

We have got high priority ticket generated on our Kanban board so we will do our best to make your experience supreme!

What's next? We will collaborate using this workflow. For you this practically means making sure DONE criteria is met and responding promptly to code review comments 😉

🙏 please, help us improve, rate your contributing experience after merge

LashaJini

Tested on Firefox, works as expected. Awesome how to test in description 👍

.changeset/polite-apricots-drive.md

the-teacher · 2022-04-29T14:03:34Z

Chrome on/off

the-teacher · 2022-04-29T14:07:22Z

FF on/on
@pudek357 I do not like this case. In FF both cases have on, but the autocomplete is visible only for the first input. Is it fine?

the-teacher · 2022-04-29T14:09:19Z

Chrome on/on

pudek357 · 2022-05-02T02:43:31Z

@toptal-bot run all

the-teacher · 2022-05-02T06:54:36Z

I have it checked on FF with on/off options on the last available Picasso version.
Now it looks good!

the-teacher

Tested manually! Looks great!

packages/picasso-forms/src/Field/Field.tsx

pudek357 · 2022-05-02T09:12:27Z

@toptal-bot run all

denieler

right now we have below 4% of users who use Firefox. Do you think it's an important fix to introduce?

packages/picasso-forms/src/Field/Field.tsx

sashuk · 2022-05-02T09:54:22Z

Hello, @denieler! Regarding #2698 (review) – I think we do need this fix, as it was reported by actual users (this affects the Screening Ops team work, for example (https://toptal-core.slack.com/archives/C01ANC5RH8B/p1650458144649619)

pudek357 · 2022-05-02T10:11:41Z

@toptal-bot run all

packages/picasso-forms/src/Field/Field.tsx

OndrejTuma

LGTM

augustobmoura

Manual tested and it works great! 👍

denieler

Checked the code, it looks ok 👍 Haven't tested manually 🙇‍♂️

toptal-devbot · 2022-05-02T14:38:27Z

🎉 Last commit is successfully deployed 🎉

Demo is available on:

https://picasso.toptal.net/SPT-2611-fix-autofill-for-firefox/

Your davinci-bot 🚀

pudek357 added the Bugfix Something isn't working label Apr 28, 2022

pudek357 self-assigned this Apr 28, 2022

pudek357 force-pushed the SPT-2611-fix-autofill-for-firefox branch from ef72e92 to 9491076 Compare April 28, 2022 10:37

pudek357 marked this pull request as ready for review April 28, 2022 14:58

pudek357 requested a review from a team as a code owner April 28, 2022 14:58

github-actions bot added the contribution DO NOT ADD MANUALLY label Apr 28, 2022

LashaJini approved these changes Apr 29, 2022

View reviewed changes

.changeset/polite-apricots-drive.md Outdated Show resolved Hide resolved

pudek357 added 4 commits May 2, 2022 09:29

fix: make autofill work for controlled input in Firefox

cf36b89

fix: add check for event.target

04dd469

chore: add changeset file

5f77a87

chore: update changeset

bbb4178

pudek357 force-pushed the SPT-2611-fix-autofill-for-firefox branch from 9491076 to bbb4178 Compare May 2, 2022 02:42

the-teacher reviewed May 2, 2022

View reviewed changes

the-teacher approved these changes May 2, 2022

View reviewed changes

OndrejTuma reviewed May 2, 2022

View reviewed changes

packages/picasso-forms/src/Field/Field.tsx Outdated Show resolved Hide resolved

TomasSlama approved these changes May 2, 2022

View reviewed changes

dmaklygin reviewed May 2, 2022

View reviewed changes

packages/picasso-forms/src/Field/Field.tsx Show resolved Hide resolved

refactor: use autofill fix only for Firefox browser

1fc7342

denieler reviewed May 2, 2022

View reviewed changes

dmaklygin reviewed May 2, 2022

View reviewed changes

packages/picasso-forms/src/Field/Field.tsx Outdated Show resolved Hide resolved

refactor: move browser check out of the component

f10d839

TomasSlama approved these changes May 2, 2022

View reviewed changes

dmaklygin approved these changes May 2, 2022

View reviewed changes

denieler reviewed May 2, 2022

View reviewed changes

packages/picasso-forms/src/Field/Field.tsx Show resolved Hide resolved

OndrejTuma approved these changes May 2, 2022

View reviewed changes

augustobmoura approved these changes May 2, 2022

View reviewed changes

fix: support usage event.target.defaultValue from onChange

4a53f8a

denieler approved these changes May 2, 2022

View reviewed changes

pudek357 merged commit 2f85d8f into master May 2, 2022

pudek357 deleted the SPT-2611-fix-autofill-for-firefox branch May 2, 2022 14:45

toptal-build mentioned this pull request May 2, 2022

Version Packages [skip ci] #2711

Merged

1 task

Hadsch mentioned this pull request Sep 23, 2022

Firefox: Autocomplete/Autofill not working facebook/react#17022

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix: make autofill work for controlled input in Firefox #2698

fix: make autofill work for controlled input in Firefox #2698

pudek357 commented Apr 28, 2022 •

edited

changeset-bot bot commented Apr 28, 2022 •

edited

toptal-devbot commented Apr 28, 2022

toptal-devbot commented Apr 28, 2022

toptal-devbot commented Apr 28, 2022

toptal-devbot commented Apr 28, 2022

toptal-devbot commented Apr 28, 2022

LashaJini left a comment

the-teacher commented Apr 29, 2022 •

edited

the-teacher commented Apr 29, 2022 •

edited

the-teacher commented Apr 29, 2022

pudek357 commented May 2, 2022

the-teacher commented May 2, 2022

the-teacher left a comment

pudek357 commented May 2, 2022

denieler left a comment

sashuk commented May 2, 2022

pudek357 commented May 2, 2022

OndrejTuma left a comment

augustobmoura left a comment

denieler left a comment

toptal-devbot commented May 2, 2022

fix: make autofill work for controlled input in Firefox #2698

fix: make autofill work for controlled input in Firefox #2698

Conversation

pudek357 commented Apr 28, 2022 • edited

Description

How to test

Development checks

When to approve? ✅

When to request changes? ❌

When to comment (neither ✅ nor ❌)

How to handle the comments?

changeset-bot bot commented Apr 28, 2022 • edited

🦋 Changeset detected

toptal-devbot commented Apr 28, 2022

toptal-devbot commented Apr 28, 2022

toptal-devbot commented Apr 28, 2022

toptal-devbot commented Apr 28, 2022

toptal-devbot commented Apr 28, 2022

LashaJini left a comment

Choose a reason for hiding this comment

the-teacher commented Apr 29, 2022 • edited

the-teacher commented Apr 29, 2022 • edited

the-teacher commented Apr 29, 2022

pudek357 commented May 2, 2022

the-teacher commented May 2, 2022

the-teacher left a comment

Choose a reason for hiding this comment

pudek357 commented May 2, 2022

denieler left a comment

Choose a reason for hiding this comment

sashuk commented May 2, 2022

pudek357 commented May 2, 2022

OndrejTuma left a comment

Choose a reason for hiding this comment

augustobmoura left a comment

Choose a reason for hiding this comment

denieler left a comment

Choose a reason for hiding this comment

toptal-devbot commented May 2, 2022

pudek357 commented Apr 28, 2022 •

edited

changeset-bot bot commented Apr 28, 2022 •

edited

the-teacher commented Apr 29, 2022 •

edited

the-teacher commented Apr 29, 2022 •

edited