[TextareaAutosize][TextField] selectionchange event fires infinitely when multiline

[aaw5017]

Steps to reproduce

Steps:

1. Open this link to live example: https://codesandbox.io/p/sandbox/w4swwy
2. Navigate to the Demo.tsx file
3. Open your browser's development console
4. See selectionchange events being fired continuously

Current behavior

selectionchange events are being fired constantly if the placeholder and multiline props are set on the TextField component

Expected behavior

selectionchange events should only fire when a user purposely selects text within the TextField

Context

This bug was identified by our users

We have in-house code that taps into selectionchange events at the document level. We are setting up the event listener in a similar way to the code sandbox example from above.

This bug is saturating our event handler, and our in-house logic no longer works because of it

The breaking patch seems to be 6.4.2. Rolling back to 6.4.1 fixes the issue

Your environment

npx @mui/envinfo

System:
    OS: macOS 14.7.2
  Binaries:
    Node: 20.13.0 - ~/.nvm/versions/node/v20.13.0/bin/node
    npm: 10.5.2 - ~/.nvm/versions/node/v20.13.0/bin/npm
    pnpm: 10.2.1 - /opt/homebrew/bin/pnpm
  Browsers:
    Chrome: 133.0.6943.98
    Edge: 133.0.3065.59
    Safari: 18.2
  npmPackages:
    @emotion/react: ^11.7.1 => 11.14.0
    @emotion/styled: ^11.11.0 => 11.14.0
    @mui/base:  5.0.0-beta.69
    @mui/core-downloads-tracker:  6.4.3
    @mui/lab: ^6.0.0-beta.19 => 6.0.0-beta.26
    @mui/material: ^6.2.0 => 6.4.3
    @mui/private-theming:  6.4.3
    @mui/styled-engine:  6.4.3
    @mui/system:  6.4.3
    @mui/types:  7.2.21
    @mui/utils:  6.4.3
    @types/react: ^18.2.73 => 18.3.18
    react: ^18.2.0 => 18.3.1
    react-dom: ^18.2.0 => 18.3.1
    typescript: ^5.1.6 => 5.7.3

This bug was reported to us from a user using Chrome. I reproduced locally with Edge

Search keywords: textfield selectionchange

[DiegoAndai]

Thanks for the report @aaw5017, this definitely looks like a bug.

@mj12albert, 6.4.2 was when we released #44540, do you think it can be related?

[mj12albert]

do you think it can be related?

Yes, it's related for sure 🥲 @DiegoAndai

All the unwanted events are caused by the hidden textarea, this occurred prior to #44540 as well.

Here's a sandbox reverting the RO fix: https://codesandbox.io/p/devbox/focused-bessie-vy64pw?file=%2Fsrc%2FApp.tsx%3A3%2C1-3%2C76

During the resize, the console logs the RO "undelivered notifications" error and also event.target.value as x which is the single character in the hidden textarea used to measure height

So it's kind of a undiscovered, pre-existing issue that was made worse by the latest fix, not really a regression, at least its discovered now, better late than never 😅

---

AFTER #44540

What happened here is that:

1. the whole RO callback was being called unconditionally (on every tick)
2. therefore the RO unobserved/reobserved on every tick
3. when RO .observe()s, (the global) selectionchange event fires and cannot be cancelled

I made a fix in #45351 to only restart the observation if the height changed. However when using a global selectionchange handler it's still necessary to ignore events caused by the hidden textarea, e.g.:

const handleSelectionChange = React.useCallback((event: Event) => {
  if (event.target instanceof HTMLTextAreaElement && !event.target.ariaHidden) {
    console.log('selectionchange, the selection is:', event.target.value);
  }
}, []);

Demo of the new fix: https://codesandbox.io/p/sandbox/runtime-wood-v4mn8t

• "unwanted" selectionchange events still fire when the component externally resizes, but does not infinite loop
• does not revert back to the dreaded "undelivered notifications" error (phew)

@aaw5017 If you would like to test this locally in the mean time:

yarn add https://pkg.csb.dev/mui/material-ui/commit/7dfb4fea/@mui/material https://pkg.csb.dev/mui/material-ui/commit/7dfb4fea/@mui/system

[mj12albert]

(BTW the placeholder isn't related)