[Bugfix] Bugfix/mutation observer loop 11.7 (#11623)

(r11.7 → 11.7)

Author: apryse-webviewer-ui

src/components/ModularComponents/AppStories/App.stories.js

@@ -2,11 +2,11 @@ import App from 'components/App';
 import { mockHeadersNormalized, mockModularComponents, mockLeftHeader } from './mockAppState';
 import { userEvent, within, expect, waitFor } from 'storybook/test';
 import { defaultModularComponents, defaultModularHeaders } from 'src/redux/modularComponents';
-import { createTemplate } from 'helpers/storybookHelper';
+import { createTemplate, MockApp } from 'helpers/storybookHelper';
 import initialState from 'src/redux/initialState';
 import actions from 'actions';
 import { VIEWER_CONFIGURATIONS } from 'constants/customizationVariables';
-
+import React from 'react';
 export default {
   title: 'ModularComponents/App',
   component: App,
@@ -451,4 +451,28 @@ AppStashSwitchStory.play = async ({ canvasElement }) => {
   storeRef.current.dispatch(actions.restoreComponents(VIEWER_CONFIGURATIONS.DEFAULT));
   const newItem = await canvas.findByRole('button', { name: newName });
   await expect(newItem).toBeInTheDocument();
+};
+
+export const AppFlyoutResponsiveTest = (args, context) => {
+  return (
+    <MockApp initialState={initialState} width={500} height={800} />
+  );
+};
+
+AppFlyoutResponsiveTest.play = async ({ canvasElement }) => {
+  const canvas = within(canvasElement);
+  const zoomToggleButton = await canvas.findByRole('button', { name: 'Zoom Options' });
+  await userEvent.click(zoomToggleButton);
+  const flyout = await canvas.findByRole('button', { name: /Zoom: 100%/ });
+  await expect(flyout).toBeVisible();
+};
+
+AppFlyoutResponsiveTest.parameters = {
+  layout: 'fullscreen',
+  chromatic: {
+    delay: 2000,
+    modes: {
+      'Light theme RTL': { disable: true },
+    },
+  }
 };

src/components/ModularComponents/Flyout/Flyout.js

@@ -19,7 +19,6 @@ import Icon from 'components/Icon';
 import './Flyout.scss';
 import { Swipeable } from 'react-swipeable';
 import getAppRect from 'helpers/getAppRect';
-import debounce from 'lodash/debounce';
 
 const Flyout = () => {
   const { t } = useTranslation();
@@ -68,64 +67,73 @@ const Flyout = () => {
 
   useLayoutEffect(() => {
     const tempRefElement = getElementDOMRef(toggleElement);
-    const appRect = getAppRect();
-    const maxHeightValue = appRect.height - horizontalHeadersUsedHeight;
-    setMaxHeightValue(maxHeightValue);
 
-    // Check if the element is in the dom or invisible
+    // Check if the element is in the DOM or invisible
     if (tempRefElement && tempRefElement.offsetParent === null) {
       return;
     }
 
-    const calculateAndSetPosition = () => {
-      const tempRefElement = getElementDOMRef(toggleElement);
-      const appRect = getAppRect();
-      const correctedPosition = { x: position.x, y: position.y };
-      // Check if toggleElement is not null
-      if (toggleElement && tempRefElement) {
+    const calculateAndMaybeSetPosition = () => {
+      const refEl = getElementDOMRef(toggleElement);
+      const app = getAppRect();
+      // Keep max height in sync with the exact app rect used for positioning
+      setMaxHeightValue(app.height - horizontalHeadersUsedHeight);
+      const next = { x: position.x, y: position.y };
+
+      if (toggleElement && refEl) {
         const { x, y } = getFlyoutPositionOnElement(toggleElement, flyoutRef);
-        correctedPosition.x = x;
-        correctedPosition.y = y;
+        next.x = x;
+        next.y = y;
       }
+
       const flyoutRect = flyoutRef.current?.getBoundingClientRect();
-      if (flyoutRect) {
+      if (flyoutRect && app) {
         const PADDING = 5;
-        const widthOverflow = correctedPosition.x + flyoutRect.width + PADDING - appRect.right;
-        const heightOverflow = correctedPosition.y + flyoutRect.height + PADDING - appRect.bottom;
+        const widthOverflow = next.x + flyoutRect.width + PADDING - app.right;
+        const heightOverflow = next.y + flyoutRect.height + PADDING - app.bottom;
         if (widthOverflow > 0) {
-          correctedPosition.x -= widthOverflow;
+          next.x -= widthOverflow;
         }
         if (heightOverflow > 0) {
-          correctedPosition.y -= heightOverflow;
+          next.y -= heightOverflow;
         }
-        if (correctedPosition.x < PADDING) {
-          correctedPosition.x = PADDING;
+        if (next.x < PADDING) {
+          next.x = PADDING;
         }
-        if (correctedPosition.y < PADDING) {
-          correctedPosition.y = PADDING;
+        if (next.y < PADDING) {
+          next.y = PADDING;
         }
       }
-      setCorrectedPosition(correctedPosition);
+
+      setCorrectedPosition((prev) => {
+        if (!prev || prev.x !== next.x || prev.y !== next.y) {
+          return next;
+        }
+        return prev;
+      });
     };
 
-    // Wait for flyout to render all items before calculating position
+    // Run once now and once on the next frame to catch late layout
     if (flyoutRef.current) {
-      let observer;
-      const disconnect = debounce(
-        () => observer.disconnect(),
-        100, { leading: false, trailing: true });
-      const setPosition = () => {
-        calculateAndSetPosition();
-        disconnect();
-      };
-      // Set position at multiple stages to minimize flickering
-      observer = new MutationObserver(setPosition);
-      observer.observe(flyoutRef.current, { attributes: true, childList: true, subtree: true });
-      setPosition();
-      requestAnimationFrame(setPosition);
-      return () => observer.disconnect();
+      calculateAndMaybeSetPosition();
+      requestAnimationFrame(calculateAndMaybeSetPosition);
     }
-  }, [activeItem, position, items, inputValue]);
+
+    let resizeObserver;
+
+    if (typeof ResizeObserver !== 'undefined' && flyoutRef.current) {
+      resizeObserver = new ResizeObserver(() => {
+        calculateAndMaybeSetPosition();
+      });
+      resizeObserver.observe(flyoutRef.current);
+    }
+
+    return () => {
+      if (resizeObserver) {
+        resizeObserver.disconnect();
+      }
+    };
+  }, [activePath, position, items, inputValue, isFlyoutOpen]);
 
   useLayoutEffect(() => {
     const appRect = getAppRect();

src/components/ModularComponents/FlyoutItemContainer/FlyoutItemContainer.js

@@ -63,6 +63,7 @@ const FlyoutItemContainer = forwardRef((props, ref) => {
 
     const flyoutItemLabel = label ?? title;
     const finalLabel = typeof flyoutItemLabel === 'string' ? t(flyoutItemLabel) : flyoutItemLabel;
+    const finalLabelString = typeof finalLabel === 'string' ? finalLabel : null;
     const isSelected = props.additionalClass === 'active';
     return (
       <button
@@ -72,7 +73,7 @@ const FlyoutItemContainer = forwardRef((props, ref) => {
         aria-disabled={disabled}
         onKeyDown={onKeyDownHandler}
         data-element={dataElement}
-        aria-label={finalLabel}
+        aria-label={finalLabelString}
         aria-pressed={isSelected}
       >
         <div className="icon-label-wrapper">