diff --git a/.changeset/soft-steaks-kick.md b/.changeset/soft-steaks-kick.md new file mode 100644 index 00000000000..402f7fa567d --- /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 f3fab2ba794..0547075607a 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 = {