Prevent body scroll when the search modal opens

Signed-off-by: Ryan Wang <[email protected]>

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 = [