From 1d0884728a5ccee3392ac95c3b4fbfb3124503b0 Mon Sep 17 00:00:00 2001
From: Noah Hefner <nhefner127+github@protonmail.com>
Date: Sun, 18 Jan 2026 18:07:55 -0500
Subject: [PATCH] fix focus issue with modal

---
 client/components/Modal.vue    | 24 ++++++++++++++++++++++++
 client/partials/NavBar.vue     |  2 +-
 client/views/Note.vue          |  2 +-
 client/views/SearchResults.vue |  2 +-
 4 files changed, 27 insertions(+), 3 deletions(-)

diff --git a/client/components/Modal.vue b/client/components/Modal.vue
index 351fb64b..0fc4443a 100644
--- a/client/components/Modal.vue
+++ b/client/components/Modal.vue
@@ -16,6 +16,7 @@
 </template>
 
 <script setup>
+import { onBeforeUnmount, watch } from "vue";
 import Mousetrap from "mousetrap";
 
 defineOptions({
@@ -26,6 +27,17 @@ const props = defineProps({
 });
 const isVisible = defineModel({ type: Boolean });
 
+// Make backgound inert when a modal is open
+function setBackgroundInert(isInert) {
+  document.querySelectorAll("[data-inert-scope]").forEach((el) => {
+    if (isInert) {
+      el.setAttribute("inert", "");
+    } else {
+      el.removeAttribute("inert");
+    }
+  });
+}
+
 // 'escape' to close
 Mousetrap.bind("esc", () => {
   if (isVisible.value) {
@@ -40,4 +52,16 @@ function closeHandler() {
     isVisible.value = false;
   }
 }
+
+watch(isVisible, (visible) => {
+  if (visible) {
+    setBackgroundInert(true);
+  } else {
+    setBackgroundInert(false);
+  }
+});
+
+onBeforeUnmount(() => {
+  setBackgroundInert(false);
+});
 </script>
diff --git a/client/partials/NavBar.vue b/client/partials/NavBar.vue
index e1c24783..0891d76c 100644
--- a/client/partials/NavBar.vue
+++ b/client/partials/NavBar.vue
@@ -1,5 +1,5 @@
 <template>
-  <nav class="mb-2 flex justify-between align-top md:mb-12">
+  <nav data-inert-scope class="mb-2 flex justify-between align-top md:mb-12">
     <RouterLink :to="{ name: 'home' }" v-if="!hideLogo">
       <Logo responsive></Logo>
     </RouterLink>
diff --git a/client/views/Note.vue b/client/views/Note.vue
index c05829ae..68ab8a93 100644
--- a/client/views/Note.vue
+++ b/client/views/Note.vue
@@ -38,7 +38,7 @@
     "
   />
 
-  <LoadingIndicator ref="loadingIndicator" class="flex h-full flex-col">
+  <LoadingIndicator data-inert-scope ref="loadingIndicator" class="flex h-full flex-col">
     <!-- Header -->
     <div class="flex flex-col-reverse md:flex-row md:items-baseline">
       <!-- Title -->
diff --git a/client/views/SearchResults.vue b/client/views/SearchResults.vue
index 905e7502..77404d9f 100644
--- a/client/views/SearchResults.vue
+++ b/client/views/SearchResults.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="flex h-full max-w-[700px] flex-col">
+  <div data-inert-scope class="flex h-full max-w-[700px] flex-col">
     <!-- Search Input -->
     <SearchInput :initialSearchTerm="props.searchTerm" class="mb-2" />