bugfix(react-dialog): fix scroll locking issues introduced by a regre…

…ssion (microsoft#31377)

change/@fluentui-react-dialog-f8bedb1e-8ca8-4bd7-86ed-0c7623fd0368.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "bugfix: fix scroll locking issues introduced by a regression",
+  "packageName": "@fluentui/react-dialog",
+  "email": "bernardo.sunderhus@gmail.com",
+  "dependentChangeType": "patch"
+}

packages/react-components/react-dialog/src/components/Dialog/useDialog.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import { useControllableState, useEventCallback, useId, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';
+import { useControllableState, useEventCallback, useId } from '@fluentui/react-utilities';
 import { useHasParentContext } from '@fluentui/react-context-selector';
-import { useDisableBodyScroll, useFocusFirstElement } from '../../utils';
+import { useFocusFirstElement } from '../../utils';
 import { DialogContext } from '../../contexts';
 
 import type { DialogOpenChangeData, DialogProps, DialogState } from './Dialog.types';
@@ -45,19 +45,6 @@ export const useDialog_unstable = (props: DialogProps): DialogState => {
 
   const isNestedDialog = useHasParentContext(DialogContext);
 
-  const { disableBodyScroll, enableBodyScroll } = useDisableBodyScroll();
-  const isBodyScrollLocked = Boolean(open && modalType !== 'non-modal');
-  useIsomorphicLayoutEffect(() => {
-    if (isNestedDialog) {
-      return;
-    }
-    if (open && isBodyScrollLocked) {
-      disableBodyScroll();
-    } else {
-      enableBodyScroll();
-    }
-  }, [disableBodyScroll, enableBodyScroll, isBodyScrollLocked, isNestedDialog, open]);
-
   return {
     components: {
       backdrop: 'div',

packages/react-components/react-dialog/src/components/DialogSurface/useDialogSurface.ts

@@ -5,11 +5,13 @@ import {
   isResolvedShorthand,
   slot,
   getIntrinsicElementProps,
+  useIsomorphicLayoutEffect,
 } from '@fluentui/react-utilities';
 import type { DialogSurfaceElement, DialogSurfaceProps, DialogSurfaceState } from './DialogSurface.types';
 import { useDialogContext_unstable } from '../../contexts';
 import { Escape } from '@fluentui/keyboard-keys';
 import { useDialogTransitionContext_unstable } from '../../contexts/dialogTransitionContext';
+import { useDisableBodyScroll } from '../../utils/useDisableBodyScroll';
 
 /**
  * Create the state required to render DialogSurface.
@@ -31,6 +33,7 @@ export const useDialogSurface_unstable = (
   const dialogRef = useDialogContext_unstable(ctx => ctx.dialogRef);
   const requestOpenChange = useDialogContext_unstable(ctx => ctx.requestOpenChange);
   const dialogTitleID = useDialogContext_unstable(ctx => ctx.dialogTitleId);
+  const open = useDialogContext_unstable(ctx => ctx.open);
 
   const handledBackdropClick = useEventCallback((event: React.MouseEvent<HTMLDivElement>) => {
     if (isResolvedShorthand(props.backdrop)) {
@@ -70,6 +73,20 @@ export const useDialogSurface_unstable = (
   if (backdrop) {
     backdrop.onClick = handledBackdropClick;
   }
+
+  const { disableBodyScroll, enableBodyScroll } = useDisableBodyScroll();
+  const isBodyScrollLocked = Boolean(open && modalType !== 'non-modal');
+  useIsomorphicLayoutEffect(() => {
+    if (isNestedDialog) {
+      return;
+    }
+    if (open && isBodyScrollLocked && transitionStatus === 'entering') {
+      disableBodyScroll();
+    } else if (transitionStatus === 'exited') {
+      enableBodyScroll();
+    }
+  }, [disableBodyScroll, enableBodyScroll, isBodyScrollLocked, isNestedDialog, open, transitionStatus]);
+
   return {
     components: { backdrop: 'div', root: 'div' },
     backdrop,

packages/react-components/react-dialog/src/utils/useDisableBodyScroll.styles.ts

@@ -5,3 +5,7 @@ export const useHTMLNoScrollStyles = makeResetStyles({
   overflowY: ['hidden', 'clip'],
   scrollbarGutter: 'stable',
 });
+
+export const useBodyNoScrollStyles = makeResetStyles({
+  overflowY: 'hidden',
+});

packages/react-components/react-dialog/src/utils/useDisableBodyScroll.ts

@@ -1,37 +1,41 @@
 import { useFluent_unstable } from '@fluentui/react-shared-contexts';
 import { useCallback } from 'react';
 
-import { useHTMLNoScrollStyles } from './useDisableBodyScroll.styles';
+import { useBodyNoScrollStyles, useHTMLNoScrollStyles } from './useDisableBodyScroll.styles';
 
 /**
- * hook that disables body scrolling through `overflowY: hidden` CSS property
+ * @internal
+ * A React *hook* that disables body scrolling through `overflowY: hidden` CSS property
  */
 export function useDisableBodyScroll(): {
   disableBodyScroll: () => void;
   enableBodyScroll: () => void;
 } {
-  const htmlNoScrollStyle = useHTMLNoScrollStyles();
+  const htmlNoScrollStyles = useHTMLNoScrollStyles();
+  const bodyNoScrollStyles = useBodyNoScrollStyles();
   const { targetDocument } = useFluent_unstable();
 
   const disableBodyScroll = useCallback(() => {
     if (!targetDocument) {
       return;
     }
-    const isScrollbarVisible =
-      (targetDocument.defaultView?.innerWidth ?? 0) > targetDocument.documentElement.clientWidth;
-    if (!isScrollbarVisible) {
+    const isHorizontalScrollbarVisible =
+      targetDocument.body.clientHeight > (targetDocument.defaultView?.innerHeight ?? 0);
+    if (!isHorizontalScrollbarVisible) {
       return;
     }
-    targetDocument.documentElement.classList.add(htmlNoScrollStyle);
+    targetDocument.documentElement.classList.add(htmlNoScrollStyles);
+    targetDocument.body.classList.add(bodyNoScrollStyles);
     return;
-  }, [targetDocument, htmlNoScrollStyle]);
+  }, [targetDocument, htmlNoScrollStyles, bodyNoScrollStyles]);
 
   const enableBodyScroll = useCallback(() => {
     if (!targetDocument) {
       return;
     }
-    targetDocument.documentElement.classList.remove(htmlNoScrollStyle);
-  }, [targetDocument, htmlNoScrollStyle]);
+    targetDocument.documentElement.classList.remove(htmlNoScrollStyles);
+    targetDocument.body.classList.remove(bodyNoScrollStyles);
+  }, [targetDocument, htmlNoScrollStyles, bodyNoScrollStyles]);
 
   return {
     disableBodyScroll,