APP-4790: remove overflow-hidden from <body> on <Modal> unmount (…

…viamrobotics#603)
micheal-parks · Dec 10, 2024 · 6224a46 · 6224a46
1 parent 5bf3dcd
commit 6224a46
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 5 deletions.
diff --git a/packages/core/package.json b/packages/core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@viamrobotics/prime-core",
-  "version": "0.0.168",
+  "version": "0.0.169",
   "repository": {
     "type": "git",
     "url": "https://github.com/viamrobotics/prime.git",

diff --git a/packages/core/src/lib/__tests__/modal.spec.ts b/packages/core/src/lib/__tests__/modal.spec.ts
@@ -1,5 +1,5 @@
 import { describe, it, expect, vi } from 'vitest';
-import { render, screen, within } from '@testing-library/svelte';
+import { act, render, screen, within } from '@testing-library/svelte';
 import userEvent from '@testing-library/user-event';
 import type { ComponentProps } from 'svelte';
 import Modal from '../modal.svelte';
@@ -8,8 +8,9 @@ describe('Modal', () => {
   const onClose = vi.fn();
 
   const renderSubject = (props: ComponentProps<Modal>) => {
-    const { component } = render(Modal, props);
-    component.$on('close', onClose);
+    const result = render(Modal, props);
+    result.component.$on('close', onClose);
+    return result;
   };
 
   it('should be visible if open is true', () => {
@@ -77,4 +78,18 @@ describe('Modal', () => {
 
     expect(modal).toBeInTheDocument();
   });
+
+  it('should prevent body scroll', () => {
+    renderSubject({ isOpen: true, role: 'alertdialog' });
+
+    expect(document.body).toHaveClass('overflow-hidden');
+  });
+
+  it('should allow body to scroll on component unmount', async () => {
+    const { unmount } = renderSubject({ isOpen: true, role: 'alertdialog' });
+
+    await act(() => unmount());
+
+    expect(document.body).not.toHaveClass('overflow-hidden');
+  });
 });
diff --git a/packages/core/src/lib/modal.svelte b/packages/core/src/lib/modal.svelte
@@ -42,7 +42,7 @@ Creates a modal overlay.
 
 <script lang="ts">
 import cx from 'classnames';
-import { createEventDispatcher } from 'svelte';
+import { createEventDispatcher, onDestroy } from 'svelte';
 import IconButton from './button/icon-button.svelte';
 import { clickOutside } from '$lib';
 
@@ -72,6 +72,10 @@ const handleEscapePress = (event: KeyboardEvent) => {
 $: if (typeof document !== 'undefined') {
   document.body.classList.toggle('overflow-hidden', isOpen);
 }
+
+onDestroy(() => {
+  document.body.classList.remove('overflow-hidden');
+});
 </script>
 
 <svelte:window on:keydown={isOpen ? handleEscapePress : undefined} />