From ec2de90da478543885c1d9538ee3c4fe7f44fc8f Mon Sep 17 00:00:00 2001
From: Hanna Prinz <hanna.prinz@digitalservice.bund.de>
Date: Mon, 23 Dec 2024 16:50:17 +0100
Subject: [PATCH] Use directive to trigger search with ctrl + enter shortcut in
 all searches (#2446)

* General ctrl + enter solution using directives

RISDEV-5819
---
 .../src/components/ActiveCitationInput.vue    |  2 +-
 .../DocumentUnitSearchEntryForm.vue           | 23 +++------
 .../components/EnsuingDecisionInputGroup.vue  |  4 +-
 .../components/PreviousDecisionInputGroup.vue |  4 +-
 frontend/src/components/input/TextButton.vue  |  2 +-
 .../PeriodicalEditionReferenceInput.vue       |  6 ++-
 frontend/src/main.ts                          |  2 +
 .../periodical-evaluation/[editionId].vue     |  2 +-
 .../src/utils/onSearchShortcutDirective.ts    | 22 +++++++++
 .../test/components/activeCitations.spec.ts   | 21 +++++++-
 .../documentUnitCategories.spec.ts            |  2 +
 .../documentUnit/documentUnitSearch.spec.ts   | 48 +++++++++++++++++++
 .../documentUnitSearchEntryForm.spec.ts       |  8 +++-
 .../test/components/ensuingDecisions.spec.ts  | 23 ++++++++-
 .../editionReferenceInput.spec.ts             | 13 +++++
 .../editionReferences.spec.ts                 |  2 +
 .../test/components/previousDecisions.spec.ts | 21 +++++++-
 frontend/test/routes/[documentNumber].spec.ts |  2 +
 frontend/test/routes/[editionId].spec.ts      |  2 +
 19 files changed, 180 insertions(+), 29 deletions(-)
 create mode 100644 frontend/src/utils/onSearchShortcutDirective.ts

diff --git a/frontend/src/components/ActiveCitationInput.vue b/frontend/src/components/ActiveCitationInput.vue
index 62c3f0330f..936b04718a 100644
--- a/frontend/src/components/ActiveCitationInput.vue
+++ b/frontend/src/components/ActiveCitationInput.vue
@@ -212,7 +212,7 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="flex flex-col gap-24">
+  <div v-ctrl-enter="search" class="flex flex-col gap-24">
     <InputField
       id="activeCitationPredicate"
       v-slot="slotProps"
diff --git a/frontend/src/components/DocumentUnitSearchEntryForm.vue b/frontend/src/components/DocumentUnitSearchEntryForm.vue
index 3566b53291..49c7088582 100644
--- a/frontend/src/components/DocumentUnitSearchEntryForm.vue
+++ b/frontend/src/components/DocumentUnitSearchEntryForm.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { computed, onMounted, onUnmounted, ref, watch } from "vue"
+import { computed, ref, watch } from "vue"
 import Checkbox from "@/components/input/CheckboxInput.vue"
 import DateInput from "@/components/input/DateInput.vue"
 import DropdownInput from "@/components/input/DropdownInput.vue"
@@ -183,11 +183,6 @@ function handleSearchButtonClicked() {
   pushQueryToRoute(query.value)
 }
 
-function handleSearchShortcut(event: KeyboardEvent) {
-  if (event.key == "Enter" && (event.ctrlKey || event.metaKey))
-    handleSearchButtonClicked()
-}
-
 function handleSearch() {
   if (!isEmptySearch.value) {
     emit("search", getQueryFromRoute())
@@ -201,17 +196,8 @@ watch(
   () => {
     handleSearch()
   },
-  { deep: true },
+  { deep: true, immediate: true },
 )
-
-onMounted(async () => {
-  handleSearch()
-  window.addEventListener("keydown", handleSearchShortcut)
-})
-
-onUnmounted(() => {
-  window.removeEventListener("keydown", handleSearchShortcut)
-})
 </script>
 
 <script lang="ts">
@@ -230,7 +216,10 @@ export type DocumentUnitSearchParameter =
 </script>
 
 <template>
-  <div class="pyb-24 mb-32 flex flex-col bg-blue-200">
+  <div
+    v-ctrl-enter="handleSearchButtonClicked"
+    class="pyb-24 mb-32 flex flex-col bg-blue-200"
+  >
     <div
       class="m-40 grid grid-flow-col grid-cols-[auto_1fr_auto_1fr] grid-rows-[auto_auto_auto_auto_auto] gap-x-12 gap-y-20 lg:gap-x-32"
     >
diff --git a/frontend/src/components/EnsuingDecisionInputGroup.vue b/frontend/src/components/EnsuingDecisionInputGroup.vue
index 041145bf61..20057ed627 100644
--- a/frontend/src/components/EnsuingDecisionInputGroup.vue
+++ b/frontend/src/components/EnsuingDecisionInputGroup.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { watch, ref, computed, onMounted } from "vue"
+import { computed, onMounted, ref, watch } from "vue"
 import { ValidationError } from "./input/types"
 import SearchResultList, { SearchResults } from "./SearchResultList.vue"
 import ComboboxInput from "@/components/ComboboxInput.vue"
@@ -184,7 +184,7 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="flex flex-col gap-24">
+  <div v-ctrl-enter="search" class="flex flex-col gap-24">
     <div class="flex flex-col gap-24">
       <InputField
         id="isPending"
diff --git a/frontend/src/components/PreviousDecisionInputGroup.vue b/frontend/src/components/PreviousDecisionInputGroup.vue
index a3cac7a718..03b3ff61af 100644
--- a/frontend/src/components/PreviousDecisionInputGroup.vue
+++ b/frontend/src/components/PreviousDecisionInputGroup.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { watch, ref, computed, onMounted } from "vue"
+import { computed, onMounted, ref, watch } from "vue"
 import { ValidationError } from "./input/types"
 import SearchResultList, { SearchResults } from "./SearchResultList.vue"
 import ComboboxInput from "@/components/ComboboxInput.vue"
@@ -179,7 +179,7 @@ onMounted(async () => {
 </script>
 
 <template>
-  <div class="flex flex-col gap-24">
+  <div v-ctrl-enter="search" class="flex flex-col gap-24">
     <div class="flex flex-col gap-24">
       <InputField
         id="dateKnown"
diff --git a/frontend/src/components/input/TextButton.vue b/frontend/src/components/input/TextButton.vue
index 0f76e7a56d..70fd6df361 100644
--- a/frontend/src/components/input/TextButton.vue
+++ b/frontend/src/components/input/TextButton.vue
@@ -91,7 +91,7 @@ const render = () => {
 </script>
 
 <template>
-  <div class="w-max" data-testid>
+  <div class="w-full" data-testid>
     <render />
   </div>
 </template>
diff --git a/frontend/src/components/periodical-evaluation/references/PeriodicalEditionReferenceInput.vue b/frontend/src/components/periodical-evaluation/references/PeriodicalEditionReferenceInput.vue
index e2bc0c171e..23edfa8e70 100644
--- a/frontend/src/components/periodical-evaluation/references/PeriodicalEditionReferenceInput.vue
+++ b/frontend/src/components/periodical-evaluation/references/PeriodicalEditionReferenceInput.vue
@@ -324,7 +324,11 @@ onMounted(async () => {
 </script>
 
 <template>
-  <div ref="containerRef" class="flex flex-col border-b-1">
+  <div
+    ref="containerRef"
+    v-ctrl-enter="search"
+    class="flex flex-col border-b-1"
+  >
     <PopupModal
       v-if="showModal"
       aria-label="Dialog zur Auswahl der Löschaktion"
diff --git a/frontend/src/main.ts b/frontend/src/main.ts
index 5d038c5a8f..eb5a31bc98 100644
--- a/frontend/src/main.ts
+++ b/frontend/src/main.ts
@@ -7,10 +7,12 @@ import App from "./App.vue"
 import router from "./router"
 import useSessionStore from "./stores/sessionStore"
 import { filterConsoleWarnings } from "@/utils/filterConsoleWarnings"
+import { onSearchShortcutDirective } from "@/utils/onSearchShortcutDirective"
 
 filterConsoleWarnings()
 
 const app = createApp(App)
+app.directive("ctrl-enter", onSearchShortcutDirective)
 app.use(createHead())
 
 function targets(): string[] {
diff --git a/frontend/src/routes/caselaw/periodical-evaluation/[editionId].vue b/frontend/src/routes/caselaw/periodical-evaluation/[editionId].vue
index 2cae91dc06..bea40eb93d 100644
--- a/frontend/src/routes/caselaw/periodical-evaluation/[editionId].vue
+++ b/frontend/src/routes/caselaw/periodical-evaluation/[editionId].vue
@@ -75,7 +75,7 @@ const handleKeyDown = (event: KeyboardEvent) => {
   }
 
   switch (event.key) {
-    case "<": // Ctrl + [
+    case "<":
       toggleNavigationPanel()
       break
     case "x":
diff --git a/frontend/src/utils/onSearchShortcutDirective.ts b/frontend/src/utils/onSearchShortcutDirective.ts
new file mode 100644
index 0000000000..a4ff6c12dc
--- /dev/null
+++ b/frontend/src/utils/onSearchShortcutDirective.ts
@@ -0,0 +1,22 @@
+import { Directive } from "vue"
+
+export const onSearchShortcutDirective: Directive = {
+  mounted(el, binding) {
+    const handleKeydown = (event: KeyboardEvent) => {
+      if (
+        el.contains(document.activeElement) && // Ensure focus is inside the element
+        event.key === "Enter" &&
+        (event.ctrlKey || event.metaKey)
+      ) {
+        binding.value?.(event) // Call the provided callback
+      }
+    }
+
+    el.__handleKeydown__ = handleKeydown // Store reference for cleanup
+    window.addEventListener("keydown", handleKeydown)
+  },
+  unmounted(el) {
+    window.removeEventListener("keydown", el.__handleKeydown__)
+    delete el.__handleKeydown__
+  },
+}
diff --git a/frontend/test/components/activeCitations.spec.ts b/frontend/test/components/activeCitations.spec.ts
index c63c11360a..dbdd9a56d2 100644
--- a/frontend/test/components/activeCitations.spec.ts
+++ b/frontend/test/components/activeCitations.spec.ts
@@ -10,6 +10,7 @@ import { CitationType } from "@/domain/citationType"
 import DocumentUnit, { Court, DocumentType } from "@/domain/documentUnit"
 import documentUnitService from "@/services/documentUnitService"
 import featureToggleService from "@/services/featureToggleService"
+import { onSearchShortcutDirective } from "@/utils/onSearchShortcutDirective"
 import routes from "~/test-helper/routes"
 
 const server = setupServer(
@@ -49,6 +50,7 @@ function renderComponent(activeCitations?: ActiveCitation[]) {
     user,
     ...render(ActiveCitations, {
       global: {
+        directives: { "ctrl-enter": onSearchShortcutDirective },
         plugins: [
           [
             createTestingPinia({
@@ -67,7 +69,11 @@ function renderComponent(activeCitations?: ActiveCitation[]) {
           ],
           [router],
         ],
-        stubs: { routerLink: { template: "<a><slot/></a>" } },
+        stubs: {
+          routerLink: {
+            template: "<a><slot/></a>",
+          },
+        },
       },
     }),
   }
@@ -389,6 +395,19 @@ describe("active citations", () => {
     expect(screen.getAllByText(/test fileNumber/).length).toBe(1)
   })
 
+  it("search is triggered with shortcut", async () => {
+    const { user } = renderComponent()
+
+    expect(screen.queryByText(/test fileNumber/)).not.toBeInTheDocument()
+    await user.type(
+      await screen.findByLabelText("Aktenzeichen Aktivzitierung"),
+      "test",
+    )
+    await user.keyboard("{Control>}{Enter}")
+
+    expect(screen.getAllByText(/test fileNumber/).length).toBe(1)
+  })
+
   it("adds active citation from search results", async () => {
     const { user } = renderComponent()
 
diff --git a/frontend/test/components/documentUnit/documentUnitCategories.spec.ts b/frontend/test/components/documentUnit/documentUnitCategories.spec.ts
index c38b1c7aec..acbee79a8f 100644
--- a/frontend/test/components/documentUnit/documentUnitCategories.spec.ts
+++ b/frontend/test/components/documentUnit/documentUnitCategories.spec.ts
@@ -4,6 +4,7 @@ import { render, screen } from "@testing-library/vue"
 import { createRouter, createWebHistory } from "vue-router"
 import DocumentUnitCategories from "@/components/DocumentUnitCategories.vue"
 import DocumentUnit from "@/domain/documentUnit"
+import { onSearchShortcutDirective } from "@/utils/onSearchShortcutDirective"
 import routes from "~/test-helper/routes"
 
 function renderComponent() {
@@ -17,6 +18,7 @@ function renderComponent() {
     user,
     ...render(DocumentUnitCategories, {
       global: {
+        directives: { "ctrl-enter": onSearchShortcutDirective },
         plugins: [
           createTestingPinia({
             initialState: {
diff --git a/frontend/test/components/documentUnit/documentUnitSearch.spec.ts b/frontend/test/components/documentUnit/documentUnitSearch.spec.ts
index 7caaea55f3..f552f4a4bc 100644
--- a/frontend/test/components/documentUnit/documentUnitSearch.spec.ts
+++ b/frontend/test/components/documentUnit/documentUnitSearch.spec.ts
@@ -9,6 +9,7 @@ import { Court } from "@/domain/documentUnit"
 import DocumentUnitListEntry from "@/domain/documentUnitListEntry"
 import authService from "@/services/authService"
 import documentUnitService from "@/services/documentUnitService"
+import { onSearchShortcutDirective } from "@/utils/onSearchShortcutDirective"
 import routes from "~/test-helper/routes"
 
 const server = setupServer(
@@ -35,6 +36,7 @@ function renderComponent(
     user,
     ...render(DocumentUnitSearch, {
       global: {
+        directives: { "ctrl-enter": onSearchShortcutDirective },
         plugins: [
           router,
           createTestingPinia({
@@ -253,6 +255,52 @@ describe("Documentunit Search", () => {
     expect(screen.getAllByText(/documentNumber/).length).toBe(1)
   })
 
+  test("Search can be triggered with shortcut", async () => {
+    vi.spyOn(
+      documentUnitService,
+      "searchByDocumentUnitSearchInput",
+    ).mockImplementation(() =>
+      Promise.resolve({
+        status: 200,
+        data: {
+          content: [
+            new DocumentUnitListEntry({
+              uuid: "123",
+              court: {
+                type: "type",
+                location: "location",
+                label: "type location",
+              },
+              decisionDate: "01.02.2022",
+              documentType: {
+                jurisShortcut: "documentTypeShortcut",
+                label: "docTypeLabel",
+              },
+              documentNumber: "documentNumber",
+              fileNumber: "fileNumber",
+            }),
+          ],
+          size: 0,
+          number: 0,
+          numberOfElements: 20,
+          first: true,
+          last: false,
+          empty: false,
+        },
+      }),
+    )
+
+    const { user } = renderComponent()
+
+    await user.type(screen.getByLabelText("Gerichtstyp Suche"), "AG")
+    expect(screen.getByLabelText("Gerichtstyp Suche")).toHaveValue("AG")
+
+    await user.keyboard("{Control>}{Enter}")
+
+    expect(screen.getAllByRole("row").length).toBe(1)
+    expect(screen.getAllByText(/documentNumber/).length).toBe(1)
+  })
+
   test("click on 'Ergebnisse anzeigen' without results let's you create a new doc unit", async () => {
     vi.spyOn(
       documentUnitService,
diff --git a/frontend/test/components/documentUnit/documentUnitSearchEntryForm.spec.ts b/frontend/test/components/documentUnit/documentUnitSearchEntryForm.spec.ts
index 6680547f3b..8f9d27fec4 100644
--- a/frontend/test/components/documentUnit/documentUnitSearchEntryForm.spec.ts
+++ b/frontend/test/components/documentUnit/documentUnitSearchEntryForm.spec.ts
@@ -3,6 +3,7 @@ import { render, screen } from "@testing-library/vue"
 import { expect } from "vitest"
 import { createRouter, createWebHistory } from "vue-router"
 import DocumentUnitSearchEntryForm from "@/components/DocumentUnitSearchEntryForm.vue"
+import { onSearchShortcutDirective } from "@/utils/onSearchShortcutDirective"
 
 async function renderComponent(options?: { isLoading: boolean }) {
   const props = {
@@ -23,7 +24,12 @@ async function renderComponent(options?: { isLoading: boolean }) {
   return {
     ...render(DocumentUnitSearchEntryForm, {
       props,
-      global: { plugins: [router] },
+      global: {
+        directives: {
+          "ctrl-enter": onSearchShortcutDirective,
+        },
+        plugins: [router],
+      },
     }),
     user: userEvent.setup(),
     router: router,
diff --git a/frontend/test/components/ensuingDecisions.spec.ts b/frontend/test/components/ensuingDecisions.spec.ts
index 314974715c..52759b8770 100644
--- a/frontend/test/components/ensuingDecisions.spec.ts
+++ b/frontend/test/components/ensuingDecisions.spec.ts
@@ -9,6 +9,7 @@ import DocumentUnit, { Court, DocumentType } from "@/domain/documentUnit"
 import EnsuingDecision from "@/domain/ensuingDecision"
 import documentUnitService from "@/services/documentUnitService"
 import featureToggleService from "@/services/featureToggleService"
+import { onSearchShortcutDirective } from "@/utils/onSearchShortcutDirective"
 import routes from "~/test-helper/routes"
 
 const server = setupServer(
@@ -41,6 +42,9 @@ function renderComponent(ensuingDecisions?: EnsuingDecision[]) {
     user,
     ...render(EnsuingDecisions, {
       global: {
+        directives: {
+          "ctrl-enter": onSearchShortcutDirective,
+        },
         plugins: [
           [
             createTestingPinia({
@@ -57,7 +61,11 @@ function renderComponent(ensuingDecisions?: EnsuingDecision[]) {
           ],
           [router],
         ],
-        stubs: { routerLink: { template: "<a><slot/></a>" } },
+        stubs: {
+          routerLink: {
+            template: "<a><slot/></a>",
+          },
+        },
       },
     }),
   }
@@ -326,6 +334,19 @@ describe("EnsuingDecisions", () => {
     expect(screen.getAllByText(/test fileNumber/).length).toBe(1)
   })
 
+  it("search is triggered with shortcut", async () => {
+    const { user } = renderComponent()
+
+    expect(screen.queryByText(/test fileNumber/)).not.toBeInTheDocument()
+    await user.type(
+      await screen.findByLabelText("Aktenzeichen Nachgehende Entscheidung"),
+      "test",
+    )
+    await user.keyboard("{Control>}{Enter}")
+
+    expect(screen.getAllByText(/test fileNumber/).length).toBe(1)
+  })
+
   it("adds ensuing decision from search results", async () => {
     const { user } = renderComponent()
 
diff --git a/frontend/test/components/periodicalEvaluation/editionReferenceInput.spec.ts b/frontend/test/components/periodicalEvaluation/editionReferenceInput.spec.ts
index e73514d38d..51a7689d98 100644
--- a/frontend/test/components/periodicalEvaluation/editionReferenceInput.spec.ts
+++ b/frontend/test/components/periodicalEvaluation/editionReferenceInput.spec.ts
@@ -5,6 +5,7 @@ import { createRouter, createWebHistory } from "vue-router"
 import PeriodicalEditionReferenceInput from "@/components/periodical-evaluation/references/PeriodicalEditionReferenceInput.vue"
 import RelatedDocumentation from "@/domain/relatedDocumentation"
 import documentUnitService from "@/services/documentUnitService"
+import { onSearchShortcutDirective } from "@/utils/onSearchShortcutDirective"
 import routes from "~/test-helper/routes"
 
 function renderComponent() {
@@ -22,6 +23,7 @@ function renderComponent() {
         isSaved: false,
       },
       global: {
+        directives: { "ctrl-enter": onSearchShortcutDirective },
         plugins: [
           router,
           [
@@ -74,6 +76,17 @@ describe("Legal periodical edition reference input", () => {
     )
   })
 
+  it("search is triggered with shortcut", async () => {
+    vi.spyOn(console, "error").mockImplementation(() => null)
+    const { user } = renderComponent()
+
+    expect(screen.queryByText(/test fileNumber1/)).not.toBeInTheDocument()
+    await user.type(await screen.findByLabelText("Aktenzeichen"), "test")
+    await user.keyboard("{Control>}{Enter}")
+
+    expect(screen.getAllByText(/test fileNumber1/).length).toBe(1)
+  })
+
   test("adding a decision scrolls to reference on validation errors", async () => {
     vi.spyOn(console, "error").mockImplementation(() => null)
 
diff --git a/frontend/test/components/periodicalEvaluation/editionReferences.spec.ts b/frontend/test/components/periodicalEvaluation/editionReferences.spec.ts
index e8c909aafa..db6c1e4168 100644
--- a/frontend/test/components/periodicalEvaluation/editionReferences.spec.ts
+++ b/frontend/test/components/periodicalEvaluation/editionReferences.spec.ts
@@ -13,6 +13,7 @@ import documentUnitService from "@/services/documentUnitService"
 import featureToggleService from "@/services/featureToggleService"
 import { ServiceResponse } from "@/services/httpClient"
 import service from "@/services/legalPeriodicalEditionService"
+import { onSearchShortcutDirective } from "@/utils/onSearchShortcutDirective"
 import testRoutes from "~/test-helper/routes"
 
 const editionUUid = crypto.randomUUID()
@@ -56,6 +57,7 @@ async function renderComponent(options?: { references?: Reference[] }) {
     user,
     ...render(PeriodicalEditionReferences, {
       global: {
+        directives: { "ctrl-enter": onSearchShortcutDirective },
         plugins: [router, pinia],
       },
     }),
diff --git a/frontend/test/components/previousDecisions.spec.ts b/frontend/test/components/previousDecisions.spec.ts
index 7d9003e424..fa75b65d93 100644
--- a/frontend/test/components/previousDecisions.spec.ts
+++ b/frontend/test/components/previousDecisions.spec.ts
@@ -9,6 +9,7 @@ import DocumentUnit, { Court, DocumentType } from "@/domain/documentUnit"
 import PreviousDecision from "@/domain/previousDecision"
 import documentUnitService from "@/services/documentUnitService"
 import featureToggleService from "@/services/featureToggleService"
+import { onSearchShortcutDirective } from "@/utils/onSearchShortcutDirective"
 import routes from "~/test-helper/routes"
 
 const server = setupServer(
@@ -40,7 +41,12 @@ function renderComponent(previousDecisions?: PreviousDecision[]) {
     user,
     ...render(PreviousDecisions, {
       global: {
-        stubs: { routerLink: { template: "<a><slot/></a>" } },
+        directives: { "ctrl-enter": onSearchShortcutDirective },
+        stubs: {
+          routerLink: {
+            template: "<a><slot/></a>",
+          },
+        },
         plugins: [
           [
             createTestingPinia({
@@ -357,6 +363,19 @@ describe("PreviousDecisions", () => {
     expect(screen.getAllByText(/test fileNumber/).length).toBe(1)
   })
 
+  it("search is triggered with shortcut", async () => {
+    const { user } = renderComponent()
+
+    expect(screen.queryByText(/test fileNumber/)).not.toBeInTheDocument()
+    await user.type(
+      await screen.findByLabelText("Aktenzeichen Vorgehende Entscheidung"),
+      "test",
+    )
+    await user.keyboard("{Control>}{Enter}")
+
+    expect(screen.getAllByText(/test fileNumber/).length).toBe(1)
+  })
+
   it("adds previous decision from search results", async () => {
     const { user } = renderComponent()
 
diff --git a/frontend/test/routes/[documentNumber].spec.ts b/frontend/test/routes/[documentNumber].spec.ts
index 651f856269..cd9cfc8c24 100644
--- a/frontend/test/routes/[documentNumber].spec.ts
+++ b/frontend/test/routes/[documentNumber].spec.ts
@@ -9,6 +9,7 @@ import DocumentNumber from "@/routes/caselaw/documentUnit/[documentNumber].vue"
 import documentUnitService from "@/services/documentUnitService"
 import featureToggleService from "@/services/featureToggleService"
 import { ServiceResponse } from "@/services/httpClient"
+import { onSearchShortcutDirective } from "@/utils/onSearchShortcutDirective"
 
 function renderComponent() {
   const user = userEvent.setup()
@@ -71,6 +72,7 @@ function renderComponent() {
         documentNumber: "1234567891234",
       },
       global: {
+        directives: { "ctrl-enter": onSearchShortcutDirective },
         plugins: [
           head,
           router,
diff --git a/frontend/test/routes/[editionId].spec.ts b/frontend/test/routes/[editionId].spec.ts
index adbb3b8ad9..44b69482f2 100644
--- a/frontend/test/routes/[editionId].spec.ts
+++ b/frontend/test/routes/[editionId].spec.ts
@@ -14,6 +14,7 @@ import featureToggleService from "@/services/featureToggleService"
 import { ServiceResponse } from "@/services/httpClient"
 import LegalPeriodicalEditionService from "@/services/legalPeriodicalEditionService"
 import { useDocumentUnitStore } from "@/stores/documentUnitStore"
+import { onSearchShortcutDirective } from "@/utils/onSearchShortcutDirective"
 
 const editionUuid = crypto.randomUUID()
 const legalPeriodical: LegalPeriodical = {
@@ -62,6 +63,7 @@ function renderComponent() {
     router,
     ...render(EditionId, {
       global: {
+        directives: { "ctrl-enter": onSearchShortcutDirective },
         plugins: [
           router,
           [