fix(react-dismissable-layer): body pointer-events cleanup

.changeset/tidy-layers-restore.md

@@ -0,0 +1,5 @@
+---
+'@radix-ui/react-dismissable-layer': patch
+---
+
+Fix body pointer-events cleanup when outside pointer events are disabled.

packages/react/dismissable-layer/src/dismissable-layer.test.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import { cleanup, render } from '@testing-library/react';
+import { afterEach, describe, it, expect } from 'vitest';
+import { DismissableLayer } from './dismissable-layer';
+
+describe('DismissableLayer', () => {
+  afterEach(() => {
+    cleanup();
+    document.body.style.pointerEvents = '';
+  });
+
+  it('restores body pointer events after a disabled layer is removed from the stack', () => {
+    document.body.style.pointerEvents = 'auto';
+
+    const { rerender } = render(
+      <TestLayers firstLayerDisabled secondLayerOpen />,
+    );
+
+    expect(document.body.style.pointerEvents).toBe('none');
+
+    rerender(<TestLayers firstLayerDisabled={false} secondLayerOpen />);
+    expect(document.body.style.pointerEvents).toBe('none');
+
+    rerender(<TestLayers firstLayerDisabled={false} secondLayerOpen={false} />);
+    expect(document.body.style.pointerEvents).toBe('auto');
+  });
+});
+
+function TestLayers({
+  firstLayerDisabled,
+  secondLayerOpen,
+}: {
+  firstLayerDisabled: boolean;
+  secondLayerOpen: boolean;
+}) {
+  return (
+    <>
+      <DismissableLayer disableOutsidePointerEvents={firstLayerDisabled} />
+      {secondLayerOpen ? <DismissableLayer disableOutsidePointerEvents /> : null}
+    </>
+  );
+}

packages/react/dismissable-layer/src/dismissable-layer.tsx

@@ -22,6 +22,15 @@ const DismissableLayerContext = React.createContext({
   branches: new Set<DismissableLayerBranchElement>(),
 });
 
+function restoreBodyPointerEvents(
+  ownerDocument: Document,
+  context: React.ContextType<typeof DismissableLayerContext>,
+) {
+  if (context.layersWithOutsidePointerEventsDisabled.size === 0) {
+    ownerDocument.body.style.pointerEvents = originalBodyPointerEvents;
+  }
+}
+
 type DismissableLayerElement = React.ComponentRef<typeof Primitive.div>;
 type PrimitiveDivProps = React.ComponentPropsWithoutRef<typeof Primitive.div>;
 interface DismissableLayerProps extends PrimitiveDivProps {
@@ -121,11 +130,10 @@ const DismissableLayer = React.forwardRef<DismissableLayerElement, DismissableLa
       context.layers.add(node);
       dispatchUpdate();
       return () => {
-        if (
-          disableOutsidePointerEvents &&
-          context.layersWithOutsidePointerEventsDisabled.size === 1
-        ) {
-          ownerDocument.body.style.pointerEvents = originalBodyPointerEvents;
+        if (disableOutsidePointerEvents) {
+          context.layersWithOutsidePointerEventsDisabled.delete(node);
+          restoreBodyPointerEvents(ownerDocument, context);
+          dispatchUpdate();
         }
       };
     }, [node, ownerDocument, disableOutsidePointerEvents, context]);
@@ -141,9 +149,10 @@ const DismissableLayer = React.forwardRef<DismissableLayerElement, DismissableLa
         if (!node) return;
         context.layers.delete(node);
         context.layersWithOutsidePointerEventsDisabled.delete(node);
+        restoreBodyPointerEvents(ownerDocument, context);
         dispatchUpdate();
       };
-    }, [node, context]);
+    }, [node, ownerDocument, context]);
 
     React.useEffect(() => {
       const handleUpdate = () => force({});