Merge pull request #110 from GavinJoyce/dialog-scroll-locking

fix(dialog): lock scroll when the dialog is open

addon/components/dialog.hbs

@@ -14,6 +14,7 @@
           )
         }}
         {{this.handleEscapeKey @isOpen this.onClose}}
+        {{this.lockWindowScroll}}
         {{did-insert (fn this.dialogStackProvider.push this)}}
         {{will-destroy (fn this.dialogStackProvider.remove this)}}
       >

addon/components/dialog.ts

@@ -10,7 +10,14 @@ import { modifier } from 'ember-modifier';
 
 import type DialogStackProvider from 'ember-headlessui/services/dialog-stack-provider';
 
-function getPortalRoot() {
+/**
+ * Expose the element that the `Dialog` should be "slotted" into
+ *
+ * This is exported _only_ for testing purposes; do not consider this API to be public
+ *
+ * @private
+ */
+export function getPortalRoot() {
   const { rootElement } = getOwnConfig();
 
   // If we looked up a `rootElement` config at build-time, use that; otherwise use the body
@@ -52,6 +59,29 @@ export default class DialogComponent extends Component<Args> {
     }
   );
 
+  lockWindowScroll = modifier(() => {
+    // Opt-out of some other dialog already locked scrolling
+    if (this.dialogStackProvider.dialogIsOpen) {
+      return;
+    }
+
+    let overflow = this.$portalRoot.style.overflow;
+    let paddingRight = this.$portalRoot.style.paddingRight;
+
+    // Setting `overflow: hidden` will suddenly hide the scroll bar on the window, which can cause horizontal
+    // layout shifting when the `Dialog` becomes open
+    // By applying the width of the scroll bar as padding, we can avoid that layout shift from happening
+    let scrollbarWidth = window.innerWidth - this.$portalRoot.clientWidth;
+
+    this.$portalRoot.style.overflow = 'hidden';
+    this.$portalRoot.style.paddingRight = `${scrollbarWidth}px`;
+
+    return () => {
+      this.$portalRoot.style.overflow = overflow;
+      this.$portalRoot.style.paddingRight = paddingRight;
+    };
+  });
+
   constructor(owner: unknown, args: Args) {
     super(owner, args);
 

addon/services/dialog-stack-provider.ts

@@ -8,6 +8,10 @@ interface WithGuid {
 export default class DialogStackProvider extends Service {
   stack: string[] = [];
 
+  get dialogIsOpen() {
+    return this.stack.length !== 0;
+  }
+
   @action
   hasOpenChild(dialog: WithGuid) {
     return this.stack[this.stack.length - 1] !== dialog.guid;

tests/integration/components/dialog-test.js

@@ -9,6 +9,7 @@ import { module, test, todo } from 'qunit';
 import { setupRenderingTest } from 'ember-qunit';
 
 import userEvent from '@testing-library/user-event';
+import { getPortalRoot } from 'ember-headlessui/components/dialog';
 import { Keys } from 'ember-headlessui/utils/keyboard';
 
 import {
@@ -233,7 +234,50 @@ module('Integration | Component | <Dialog>', function (hooks) {
         async function () {}
       );
 
-      todo('it should add a scroll lock to the html tag', async function () {});
+      test('it should add a scroll lock to the html tag', async function (assert) {
+        const portalRoot = getPortalRoot();
+        this.set('isOpen', false);
+
+        await render(hbs`
+          <button id="trigger" type="button" {{on "click" (set this "isOpen" true)}}>
+            Trigger
+          </button>
+          <Dialog
+            class="relative bg-blue-500"
+            @isOpen={{this.isOpen}}
+            @onClose={{set this "isOpen" false}}
+            as |d|
+          >
+            <d.Overlay data-test-overlay>Hello</d.Overlay>
+            <div tabindex="0"></div>
+          </Dialog>
+        `);
+
+        assert
+          .dom(portalRoot)
+          .doesNotHaveStyle(
+            { overflow: 'hidden' },
+            'The page is not initially "locked"'
+          );
+
+        await click(document.getElementById('trigger'));
+
+        assert
+          .dom(portalRoot)
+          .hasStyle(
+            { overflow: 'hidden' },
+            'The page becomes "locked" when the dialog is open'
+          );
+
+        await click('[data-test-overlay]');
+
+        assert
+          .dom(portalRoot)
+          .doesNotHaveStyle(
+            { overflow: 'hidden' },
+            'The page is "unlocked" when the dialog closes'
+          );
+      });
     });
 
     module('Dialog.Overlay', function () {