Prevent scroll on body when search is open (#715)

Co-authored-by: Kevin Zuniga Cuellar <[email protected]> Co-authored-by: Paul Valladares <[email protected]> Co-authored-by: HiDeoo <[email protected]> Co-authored-by: Chris Swithinbank <[email protected]>
withastro · Sep 20, 2023 · e726155 · e726155
1 parent 8b6bb87
commit e726155
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 4 deletions.
diff --git a/.changeset/soft-steaks-kick.md b/.changeset/soft-steaks-kick.md
@@ -0,0 +1,5 @@
+---
+'@astrojs/starlight': patch
+---
+
+feat: prevent scroll on body when search is open
diff --git a/packages/starlight/components/Search.astro b/packages/starlight/components/Search.astro
@@ -72,20 +72,23 @@ const pagefindTranslations = {
 
 			const openModal = (event?: MouseEvent) => {
 				dialog.showModal();
+				document.body.toggleAttribute('data-search-modal-open', true);
 				this.querySelector('input')?.focus();
 				event?.stopPropagation();
 				window.addEventListener('click', onClick);
 			};
 
-			const closeModal = () => {
-				dialog.close();
-				window.removeEventListener('click', onClick);
-			};
+			const closeModal = () => dialog.close();
 
 			openBtn.addEventListener('click', openModal);
 			openBtn.disabled = false;
 			closeBtn.addEventListener('click', closeModal);
 
+			dialog.addEventListener('close', () => {
+				document.body.toggleAttribute('data-search-modal-open', false);
+				window.removeEventListener('click', onClick);
+			});
+
 			// Listen for `/` and `cmd + k` keyboard shortcuts.
 			window.addEventListener('keydown', (e) => {
 				const isInput =
@@ -230,6 +233,10 @@ const pagefindTranslations = {
 </style>
 
 <style is:global>
+	[data-search-modal-open] {
+		overflow: hidden;
+	}
+
 	#starlight__search {
 		--sl-search-result-spacing: calc(1.25rem * var(--pagefind-ui-scale));
 		--sl-search-result-pad-inline-start: calc(3.75rem * var(--pagefind-ui-scale));