Uncontrolled RAC TextField does not restore value on browser tab restoration

[SLTKA]

Provide a general summary of the issue here

This is to extend on top of #5504.

One particular use case for uncontrolled components we have is to be able to restore value after accidental browser tab closure.

This behavior is hard to custom code with things like session storage as it would cause another tab picking up values from current. Perhaps you can suggest meaningful workaround if not fix.

Basic description: Uncontrolled Input field values are not restored when browser tab is accidentally closed and reopened (restored). Native uncontrolled input fields do this well in tested browsers.

🤔 Expected Behavior?

Uncontrolled React input values must restore when browser's tab restored. OnChange should fire as well

😯 Current Behavior

Values not restored, no event fired

💁 Possible Solution

Listen for onChange + check current value on hydration and update state

🔦 Context

Use case description:
When you have SSR React components rendered and a huge form partially filled in with values user may accidentally close tab when switching to other tabs to get values for a form. When you undo this with hot keys or browser menu (Ctrl+Shift+T on Windows) tab reopens all field values restored by browser automatically and onChange event fired. This is with native fields, so we can restore value in our data stores (by listening onChange) and keep user going.

With React Aria Components it is not working well :(

🖥️ Steps to Reproduce

Here is example I extended from the example in issue above:

https://codesandbox.io/p/devbox/reactariacomponentscontrolled-yjsfwh
Added:

<Form>
        <h2>Native Input</h2>
        <label>
          First name:
          <input
            name="firstName"
            defaultValue={defaultFirstName}
            onChange={(e) => {
              console.log("native first name onChange", e);
            }}
          />
        </label>
        <label>
          Last name:
          <input
            name="lastName"
            defaultValue={defaultFirstName}
            onChange={(e) => {
              console.log("native last name onChange", e);
            }}
          />
        </label>
        <div className="button-group">
          This native reset is will reset the values to their defaultValues, as
          expected
          <input type="reset" value="Native Reset" />
        </div>
      </Form>

To test this open running code in a separate tab (outside of code editor), change values in all fields, close tab, restore tab. Only "native" block will be properly restored and only "native" logs will be shown in console.

Tested on Chrome and Firefox on Windows.

Version

react-aria-components 1.2.1

What browsers are you seeing the problem on?

Firefox, Chrome

If other, please specify.

No response

What operating system are you using?

Windows

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response