[TextareaAutosize] Fix ResizeObserver causing infinite selectionchange loop

[mj12albert]

Fixes #45307

Demo: https://codesandbox.io/p/devbox/runtime-wood-v4mn8t

The issue is that:

1. the whole RO callback was being called unconditionally (on every tick)
2. therefore the RO restarted the observation on every tick
3. whenever RO .observe()s, (the global, uncancellable) selectionchange event fires

After the fix:

• "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)

---

• I have followed (at least) the PR section of the contributing guide.

[mui-bot]

Netlify deploy preview

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

Bundle size report

No bundle size changes (Toolpad)
No bundle size changes

Generated by 🚫 dangerJS against 187d697

[mj12albert]

@DiegoAndai I think this is the most reasonable compromise between both the original RO error and the new selectionchange infinite loop

LMK if you think this is the right way to go, if so I'll polish this a bit (and figure out how to test it 🤔 )

[DiegoAndai]

Thanks for jumping on this @mj12albert! 🙌🏼

whenever RO .observe()s, (the global, uncancellable) selectionchange event fires

I'm curious: why does the event fire?

I think this is the most reasonable compromise

To check I understand correctly: The compromise is that the "unwanted" selectionchange events still fire when the component externally resizes but does not infinite loop? What do you mean with "externally resizes"?

[mj12albert]

why does the event fire?

@DiegoAndai TBH I don't know 😓 but just observing console.logs I'm quite certain this is the case...

What do you mean with "externally resizes"?

I think typically this would be whenever the width changes, e.g. resizing the browser, but also contrived ways like in repro from the prior issue:

React.useEffect(() => {
    setTimeout(() => {
      if (textareaWrapperRef.current != null) {
        textareaWrapperRef.current.style.width = '200px';
      }
    }, 2000);
  }, []);

The compromise is that the "unwanted" selectionchange events still fire when the component externally resizes but does not infinite loop?

Yeah, the compromise is that it doesn't seem like there is anything we can do about this, and it was happening before the latest change I did anyway

I wonder if this ever happened in @aaw5017's real use-case, like if there is a fixed width in CSS maybe it won't fire the RO callback 🤔

[DiegoAndai]

@mj12albert, thanks for the explanation. Yes, let's move forward with this fix.

[mj12albert]

before applying the fix this would fire 61 times in browser tests

after the fix, it's 3 in browser tests, 2 when I test in the browser console, and it doesn't work in the unit tests...

[mj12albert]

expect(handleSelectionChange.callCount).to.lessThanOrEqual(3)
I'm not really sure what the best way to test this is, just trying to avoid making it slow or potentially flaky, do you think this is good enough? @DiegoAndai

[DiegoAndai]

Yes, I think this should be enough to catch it if it comes back 👍🏼

[DiegoAndai]

@mj12albert let me know if this is ready for review 😊