Check for ResizeObserver availability in flyout using hasResizeObserver

davismcphee · davismcphee · commit 0624fc85cb9a · 2024-03-04T15:55:01.000-04:00
diff --git a/src/components/collapsible_nav_beta/__snapshots__/collapsible_nav_beta.test.tsx.snap b/src/components/collapsible_nav_beta/__snapshots__/collapsible_nav_beta.test.tsx.snap
@@ -3,7 +3,6 @@
 exports[`EuiCollapsibleNavBeta renders 1`] = `
 <body
   class="euiBody--hasFlyout"
-  style="padding-inline-start: 0px;"
 >
   <div>
     <div
@@ -56,7 +55,6 @@ exports[`EuiCollapsibleNavBeta renders 1`] = `
 exports[`EuiCollapsibleNavBeta renders initialIsCollapsed 1`] = `
 <body
   class="euiBody--hasFlyout"
-  style="padding-inline-start: 0px;"
 >
   <div>
     <div
diff --git a/src/components/flyout/flyout.test.tsx b/src/components/flyout/flyout.test.tsx
@@ -25,12 +25,6 @@ jest.mock('../portal', () => ({
   EuiPortal: ({ children }: { children: any }) => children,
 }));
 
-global.ResizeObserver = class MockedResizeObserver {
-  observe = jest.fn();
-  unobserve = jest.fn();
-  disconnect = jest.fn();
-};
-
 describe('EuiFlyout', () => {
   shouldRenderCustomStyles(
     <EuiFlyout {...requiredProps} onClose={() => {}} />,
diff --git a/src/components/flyout/flyout.tsx b/src/components/flyout/flyout.tsx
@@ -32,6 +32,7 @@ import {
   useGeneratedHtmlId,
 } from '../../services';
 import { logicalStyle } from '../../global_styling';
+import { hasResizeObserver } from '../observer/resize_observer/resize_observer';
 
 import { CommonProps, PropsOfElement } from '../common';
 import { EuiFocusTrap, EuiFocusTrapProps } from '../focus_trap';
@@ -221,25 +222,29 @@ export const EuiFlyout = forwardRef(
 
       // We manually set up a resize observer here because useResizeObserver calls getBoundingClientRect
       // which results in layout thrashing when the width changes frequently, such as with a resizable flyout
-      const observer = new ResizeObserver((entries) => {
-        const width = entries[0]?.borderBoxSize?.[0]?.inlineSize;
-
-        /**
-         * Accomodate for the `isPushed` state by adding padding to the body equal to the width of the element
-         */
-        if (isPushed) {
-          if (side === 'right') {
-            document.body.style.paddingInlineEnd = `${width}px`;
-          } else if (side === 'left') {
-            document.body.style.paddingInlineStart = `${width}px`;
+      let observer: ResizeObserver | undefined;
+
+      if (hasResizeObserver) {
+        observer = new ResizeObserver((entries) => {
+          const width = entries[0]?.borderBoxSize?.[0]?.inlineSize;
+
+          /**
+           * Accomodate for the `isPushed` state by adding padding to the body equal to the width of the element
+           */
+          if (isPushed) {
+            if (side === 'right') {
+              document.body.style.paddingInlineEnd = `${width}px`;
+            } else if (side === 'left') {
+              document.body.style.paddingInlineStart = `${width}px`;
+            }
           }
-        }
-      });
+        });
 
-      observer.observe(resizeRef);
+        observer.observe(resizeRef);
+      }
 
       return () => {
-        observer.disconnect();
+        observer?.disconnect();
 
         if (isPushed) {
           if (side === 'right') {
