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 fd75829

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

@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.

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

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.

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:

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

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

I finally got the time to get back to this one.

• About testing: I figured out how to test it by firing the animationStart ({ animationName: 'mui-auto-fill' }) event. The test fails without the fix
• About the controlled state becoming unsynced: I couldn't find a way to improve this, Chrome simply doesn't trigger the onChange event before user interaction. It also won't allow accessing the input value on the animationStart event, that's why we mock the value:
  

  material-ui/packages/mui-material/src/InputBase/InputBase.js

  Line 498 in ca262bb

  checkDirty(event.animationName === 'mui-auto-fill-cancel' ? inputRef.current : { value: 'x' });

  
  Also, it's different from browser to browser: https://stackoverflow.com/a/11710295. InputBase provides a JS hook like @mj12albert suggested, onFilled, but the value is unavailable at that point, so it would only work for styling purposes.

I propose merging this PR to fix the filled state synchronization issue, and opening an issue about the controlled state that we can come back to after migrating to Base UI (to either fix it or add a warning on the docs).

Ready for review @Janpot @aarongarciah