add one more test case

mui · Sep 16, 2023 · 5ba5769 · 5ba5769
1 parent 99e6af5
commit 5ba5769
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 2 deletions.
diff --git a/packages/mui-base/src/TextareaAutosize/TextareaAutosize.test.tsx b/packages/mui-base/src/TextareaAutosize/TextareaAutosize.test.tsx
@@ -103,6 +103,43 @@ describe('<TextareaAutosize />', () => {
     });
   });
 
+  // For https://github.com/mui/material-ui/pull/37135
+  it('should update height without delay', async function test() {
+    if (/jsdom/.test(window.navigator.userAgent)) {
+      // It depends on ResizeObserver
+      this.skip();
+    }
+
+    function App() {
+      const ref = React.useRef<HTMLTextAreaElement>(null);
+      return (
+        <div>
+          <button
+            onClick={() => {
+              ref.current!.style.width = '250px';
+            }}
+          >
+            change
+          </button>
+          <div>
+            <TextareaAutosize
+              ref={ref}
+              style={{ width: 150, padding: 0 }}
+              defaultValue="qdzqzd qzd qzd qzd qz dqz"
+            />
+          </div>
+        </div>
+      );
+    }
+    const { container } = render(<App />);
+    const input = container.querySelector<HTMLTextAreaElement>('textarea')!;
+    const button = screen.getByRole('button');
+    expect(input.style).to.have.property('height', '30px');
+    fireEvent.click(button);
+    await sleep(10);
+    expect(input.style).to.have.property('height', '15px');
+  });
+
   describe('layout', () => {
     const getComputedStyleStub = new Map<Element, Partial<CSSStyleDeclaration>>();
     function setLayout(

diff --git a/packages/mui-base/src/TextareaAutosize/TextareaAutosize.tsx b/packages/mui-base/src/TextareaAutosize/TextareaAutosize.tsx
@@ -188,6 +188,17 @@ const TextareaAutosize = React.forwardRef(function TextareaAutosize(
       renders.current = 0;
       syncHeightWithFlushSync();
     };
+    // Workaround a "ResizeObserver loop completed with undelivered notifications" error
+    // in test.
+    // Note that we might need to use this logic in production per https://github.com/WICG/resize-observer/issues/38
+    // Also see https://github.com/mui/mui-x/issues/8733
+    let rAF: any;
+    const rAFHandleResize = () => {
+      cancelAnimationFrame(rAF);
+      rAF = requestAnimationFrame(() => {
+        handleResize();
+      });
+    };
     const debounceHandleResize = debounce(handleResize);
     const input = inputRef.current!;
     const containerWindow = ownerWindow(input);
@@ -197,12 +208,15 @@ const TextareaAutosize = React.forwardRef(function TextareaAutosize(
     let resizeObserver: ResizeObserver;
 
     if (typeof ResizeObserver !== 'undefined') {
-      resizeObserver = new ResizeObserver(handleResize);
+      resizeObserver = new ResizeObserver(
+        process.env.NODE_ENV === 'test' ? rAFHandleResize : handleResize,
+      );
       resizeObserver.observe(input);
     }
 
     return () => {
       debounceHandleResize.clear();
+      cancelAnimationFrame(rAF);
       containerWindow.removeEventListener('resize', debounceHandleResize);
       if (resizeObserver) {
         resizeObserver.disconnect();

diff --git a/packages/mui-lab/src/Masonry/Masonry.js b/packages/mui-lab/src/Masonry/Masonry.js
@@ -287,7 +287,7 @@ const Masonry = React.forwardRef(function Masonry(inProps, ref) {
 
     const resizeObserver = new ResizeObserver(() => {
       // see https://github.com/mui/material-ui/issues/36909
-      animationFrame = window.requestAnimationFrame(handleResize);
+      animationFrame = requestAnimationFrame(handleResize);
     });
 
     if (masonryRef.current) {