From e7261559f2539a0ceefd36a28e4fbbc17f5970b8 Mon Sep 17 00:00:00 2001
From: Matteo Manfredi
Date: Wed, 20 Sep 2023 11:13:54 +0200
Subject: Prevent scroll on `body` when search is open (#715)

Co-authored-by: Kevin Zuniga Cuellar <kzunigac@uvm.edu>
Co-authored-by: Paul Valladares <85648028+dreyfus92@users.noreply.github.com>
Co-authored-by: HiDeoo <494699+HiDeoo@users.noreply.github.com>
Co-authored-by: Chris Swithinbank <swithinbank@gmail.com>---
 .changeset/soft-steaks-kick.md             |  5 +++++
 packages/starlight/components/Search.astro | 15 +++++++++++----
 2 files changed, 16 insertions(+), 4 deletions(-)
 create mode 100644 .changeset/soft-steaks-kick.md

diff --git a/.changeset/soft-steaks-kick.md b/.changeset/soft-steaks-kick.md
new file mode 100644
index 00000000..402f7fa5
--- /dev/null
+++ 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
index f3fab2ba..05470756 100644
--- 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));
-- 
cgit