[material-ui][TextField] Fix filled state to be synced with autofill

[DiegoAndai]

Revert some of the TextField changes in #34849.

Fixes #36448
Explanation of the fix: #36448 (comment)

Repro instructions:

1. Open sandbox
2. Fill both TextFields and submit
3. Save password in Google Passwords Manager
4. Reload

Before

Sandbox: https://codesandbox.io/p/sandbox/pr-44135-before-zrzxy8

State after reload:

After

Sandbox: https://codesandbox.io/p/sandbox/pr-44135-after-48gdc3

State after reload:
The background color is set by Chrome, we don't handle it at the moment. The fix is that the labels are correctly placed.

[mui-bot]

Netlify deploy preview

https://deploy-preview-44135--material-ui.netlify.app/

Bundle size report

Details of bundle changes (Toolpad)
Details of bundle changes

Generated by 🚫 dangerJS against 6b32256

[DiegoAndai]

cc: @Janpot as the author of #34849. Let us know if there's something this PR overlooks 😊.

[DiegoAndai]

@aarongarciah, in #36448 (comment), I mention that the eventual correct solution to this is relying on the :autofill pseudoselector. Sadly, this won't work as the pseudoselector is also set after user interaction, so it would suffer from the same issue of the label being misplaced until the user interacts with the page.

[DiegoAndai]

Sadly, testing autofill is not supported ATM in Playwright: microsoft/playwright#26831. Testing with onChange wouldn't mimic the behavior either.

[Janpot]

Sadly, testing autofill is not supported ATM in Playwright: microsoft/playwright#26831. Testing with onChange wouldn't mimic the behavior either.

@DiegoAndai Would it be possible to mimic the behavior in jsdom? We have fine grained control over which events fire exactly.

[DiegoAndai]

While trying to figure out how to test this, I realized there's another problem here I hadn't considered: The controlled state is unsynced until user interaction:

Screen.Recording.2024-10-17.at.14.47.28.mov

This has not yet been solved in this PR. I'm putting it on hold and come back to it after my OOO period.

[mj12albert]

The controlled state is unsynced until user interaction:

These lines in InputBase should expose a JS animation hook, that seems intended to be used as a autofill event, from SO. This may provide a way to sync the controlled state @DiegoAndai

Related issues: #14453, #14427

An alternative way relies on doing a computed style check, though we probably don't want to incur the performance cost on TextField: https://github.com/clerk/javascript/pull/4560/files