From be99d3c59b48edbdf1dc48b95c2f3a4eba102cbf Mon Sep 17 00:00:00 2001
From: Ryan Wang <i@ryanc.cc>
Date: Thu, 8 Aug 2024 10:55:21 +0800
Subject: [PATCH] Prevent body scroll when the search modal opens

Signed-off-by: Ryan Wang <i@ryanc.cc>
---
 packages/search-widget/src/search-modal.ts | 16 ++++++++++++++--
 1 file changed, 14 insertions(+), 2 deletions(-)

diff --git a/packages/search-widget/src/search-modal.ts b/packages/search-widget/src/search-modal.ts
index 20af20f..b0edb61 100644
--- a/packages/search-widget/src/search-modal.ts
+++ b/packages/search-widget/src/search-modal.ts
@@ -1,5 +1,5 @@
 import resetStyles from '@unocss/reset/tailwind.css?inline';
-import { LitElement, css, html, unsafeCSS } from 'lit';
+import { LitElement, PropertyValues, css, html, unsafeCSS } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { styleMap } from 'lit/directives/style-map.js';
 import { OverlayScrollbars } from 'overlayscrollbars';
@@ -38,6 +38,18 @@ export class SearchModal extends LitElement {
     }, 0);
   }
 
+  override willUpdate(changedProperties: PropertyValues) {
+    if (!changedProperties.has('open')) {
+      return;
+    }
+
+    if (this.open) {
+      document.body.style.overflow = 'hidden';
+    } else {
+      document.body.style.removeProperty('overflow');
+    }
+  }
+
   override render() {
     return html`<div
       class="modal__wrapper"
@@ -77,8 +89,8 @@ export class SearchModal extends LitElement {
   }
 
   override disconnectedCallback() {
-    window.removeEventListener('keydown', this.handleKeydown);
     super.disconnectedCallback();
+    window.removeEventListener('keydown', this.handleKeydown);
   }
 
   static override styles = [