React: DOM Fixture Form Coverage: Restored State and Auto-fill

[nhunzaker]

Follow up from https://github.com/facebook/react/pull/10456. Presently, we don't have a manual fixture that ensures that form state is captured when the browser provides input on behalf of the user.

• [ ] Restored form state
• [ ] Autocomplete state

Other notes

As a reference point, I'd like to find some documentation around how restored state works. I think I might be using the wrong search terms. Does anyone have a link handy?

[wuweiweiwu]

@aweary @nhunzaker can I work on this?

[nhunzaker]

@wuweiweiwu Hey! Sorry, just catching up on issues! That would be wonderful!

[wuweiweiwu]

Awesome! I'll get started asap! I'll definitely reach out if I have any questions

[nhunzaker]

Hey @wuweiweiwu! There's absolutely _zero_ obligation to make headway on this, but I just wanted to follow up and see if you had any questions or hit any snags that have blocked you from making headway.

If not, no worries! I'll check in again in three weeks.

[wuweiweiwu]

Of course! Ive been taking some time to get more familiar with the codebase so I should have some progress soon! Thanks! :)

[nhunzaker]

@wuweiweiwu Following up from Twitter, I'm able to reproduce the form restore effect with the following example:

https://codesandbox.io/s/rl394q5pm

The example likes to open the wrong HTML file, you might have to view it here:
https://rl394q5pm.codesandbox.io/index.html

But basically:

1. Enter some information
2. Submit the form
3. The form fields should be cleared
4. Click the "back" button
5. The form fields are restored when history pops back to the original form history entry

This works by sending a postMessage event to the form document, effectively letting you see the behavior without navigating back-and-forth on the main window.

I wonder if we could demonstrate this with React. As far as I can tell, change and input events are not fired when you click "back".

[nhunzaker]

I wonder if you can render straight to the contentDocument of an iframe. 🤔

[wuweiweiwu]

@nhunzaker I found that I was able to create an iframe and use the ref to mount something onto it.

However, I was running into some issues where when I submitted the form, the form disappears unless I disabled the default action and subsequent postMessages weren't getting to the iframe (before submission, messages were being sent)

any help is much appreciated!

[nhunzaker]

I played around a bit with your fixture (awesome, btw!) and I'm starting to think that we need to load a completely new page instead of using a portal. It seems like something gets hung up when the form is submitted that messes up history.

I think, ideally, we just use the main fixtures page to navigate back and forth, but the iframe contents is a totally different document.

That might require some deeper changes to the fixtures. Until that time, I wonder if we could vet the idea by creating a static frame.html in the public directory that pulled in the latest React UMD modules.

[wuweiweiwu]

I see. I'll give that a try!

Do you mean the fixture test would be embedding that actual iframe url (frame.html) into the fixture test and somehow mount the react form into frame.html?

[nhunzaker]

Do you mean the fixture test would be embedding that actual iframe url (frame.html) into the fixture test and somehow mount the react form into frame.html?

Yes. Like <iframe src="frame.html" />, then we could just host a frame.html document from public (for the time being, anyway)

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contribution.

[necolas]

Putting this back up for grabs

[hassan-alam]

Hey guys, would it be alright if I picked this up? I understand this issue has open since 2017, so I'm not sure if it's still valid/open.

[nhunzaker]

Hey @hassan-alam, sure thing! Let me know if there's anything I can help with.

[hassan-alam]

@nhunzaker Thanks man, is there any way you could change the label to good first issue: taken. I don't believe I can change labels on issues.

[nhunzaker]

Yep. It's all yours!

[hassan-alam]

@nhunzaker So if I understand it correctly, I need to create an iframe referencing an html document in /public, but how do I push a React form into that iframe? Do I just set up the iframe as a form from the beginning?

Also, for the auto-complete test-case, I understand that this is super browser dependant, but I was able to create a fixture that worked for me (using Chrome autofill in incognito and separately with the Dashlane extension). Is that all I need?

[hassan-alam]

Created PR for half of the ticket: https://github.com/facebook/react/pull/17951

[nhunzaker]

Hey @hassan-alam, sorry to go quiet.

I owe you a response, and I'll take a look at the PR. Thank you for your time figuring this out; this looks promising for a problem that is otherwise difficult to demonstrate. I'll dive in.

[hassan-alam]

@nhunzaker Hey man, don't worry about it. The PR is also only for the autofilled form-state portion of this issue (since I had trouble understanding the best way to do restored form state).

[hassan-alam]

@nhunzaker The PR was merged, so the Autocomplete state portion of the ticket should be done.

I'm not sure the best way to proceed for the Restored form state portion. If possible (and if you or someone else is willing), I'd love to go through and collab to solve it :D

[stale[bot]]

This issue has been automatically marked as stale. If this issue is still affecting you, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!

[sktguha]

@nhunzaker @hassan-alam I would like to pick the Restored form state part and work on it. So can you tell me how to proceed in this case ?

[stale[bot]]

This issue has been automatically marked as stale. If this issue is still affecting you, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!

[stale[bot]]

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please create a new issue with up-to-date information. Thank you!