[#326] - Prevent focus on background element while Modal is open

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>

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>

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

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" />