Revert 'Fix focus and tabbing'

RISDEV-0000
digitalservicebund · Dec 5, 2023 · 536fafb · 536fafb
1 parent a20d64f
commit 536fafb
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 43 deletions.
diff --git a/frontend/src/components/ComboboxInput.vue b/frontend/src/components/ComboboxInput.vue
@@ -80,6 +80,7 @@ const clearSelection = async () => {
   if (showDropdown.value) {
     await updateCurrentItems("")
   }
+  inputFieldRef.value?.focus()
 }
 
 const setChosenItem = (item: ComboboxItem) => {
@@ -103,12 +104,6 @@ const onEnter = async () => {
   await toggleDropdown()
 }
 
-const onFocus = async () => {
-  if (!showDropdown.value) await toggleDropdown()
-  if (currentlyDisplayedItems.value)
-    candidateForSelection.value = currentlyDisplayedItems.value[0]
-}
-
 const keyup = () => {
   if (focusedItemIndex.value > 1) {
     focusedItemIndex.value -= 1
@@ -254,7 +249,6 @@ export type InputModelProps =
         :readonly="false"
         tabindex="0"
         @click="selectAllText"
-        @focus="onFocus"
         @input="onTextChange"
         @keydown.enter="onEnter"
         @keydown.esc="closeDropdownAndRevertToLastSavedValue"

diff --git a/frontend/src/shared/components/input/NestedInput.vue b/frontend/src/shared/components/input/NestedInput.vue
@@ -54,6 +54,23 @@ function toggleContentVisibility(): void {
 
 <template>
   <div class="relative">
+    <div class="absolute -right-10 top-48 z-10">
+      <button
+        :aria-label="`${ariaLabel} ${
+          localIsExpanded ? 'schließen' : 'anzeigen'
+        }`"
+        class="w-icon rounded-full bg-blue-800 text-white"
+        @click="toggleContentVisibility"
+      >
+        <slot v-if="localIsExpanded" name="close-icon">
+          <IconHorizontalRule />
+        </slot>
+        <slot v-else name="open-icon">
+          <IconAdd />
+        </slot>
+      </button>
+    </div>
+
     <!-- Parent Element -->
     <InputFieldComponent
       :id="fields.parent.name"
@@ -72,23 +89,6 @@ function toggleContentVisibility(): void {
       ></InputElement>
     </InputFieldComponent>
 
-    <div class="absolute -right-10 top-48 z-10">
-      <button
-        :aria-label="`${ariaLabel} ${
-          localIsExpanded ? 'schließen' : 'anzeigen'
-        }`"
-        class="w-icon rounded-full bg-blue-800 text-white"
-        @click="toggleContentVisibility"
-      >
-        <slot v-if="localIsExpanded" name="close-icon">
-          <IconHorizontalRule />
-        </slot>
-        <slot v-else name="open-icon">
-          <IconAdd />
-        </slot>
-      </button>
-    </div>
-
     <!-- Child Element -->
     <InputFieldComponent
       v-show="localIsExpanded"

diff --git a/frontend/test/components/comboboxInput.spec.ts b/frontend/test/components/comboboxInput.spec.ts
@@ -1,6 +1,6 @@
 /* eslint-disable jest-dom/prefer-in-document */
 import { userEvent } from "@testing-library/user-event"
-import { render, screen, fireEvent } from "@testing-library/vue"
+import { render, screen } from "@testing-library/vue"
 import ComboboxInput from "@/components/ComboboxInput.vue"
 import { Court } from "@/domain/documentUnit"
 import service from "@/services/comboboxItemService"
@@ -278,7 +278,7 @@ describe("Combobox Element", () => {
 
     const dropdownItemElements = screen.getAllByLabelText("dropdown-option")
 
-    expect(fetchSpy).toHaveBeenCalledTimes(4)
+    expect(fetchSpy).toHaveBeenCalledTimes(3)
     // TODO checking for "b", "bg", "bgh" as the three arguments does not work though
     expect(dropdownItemElements).toHaveLength(1)
     expect(dropdownItemElements[0]).toHaveTextContent("BGH Karlsruhe")
@@ -381,18 +381,12 @@ describe("Combobox Element", () => {
     ]) // value of testItem1
   })
 
-  it("focus should open dropdown, first value in list is preselected", async () => {
-    renderComponent()
-    const input = screen.getByLabelText("test label")
-    await fireEvent.focus(input)
-
-    expect(screen.getAllByLabelText("dropdown-option")).toHaveLength(3)
-  })
-
-  it("enter should select top value", async () => {
+  it("first Enter should open dropdown, second should select top value", async () => {
     const { emitted } = renderComponent()
     const input = screen.getByLabelText("test label")
-    await fireEvent.focus(input)
+    input.focus()
+
+    await user.keyboard("{enter}")
 
     expect(screen.getAllByLabelText("dropdown-option")).toHaveLength(3)
 

diff --git a/frontend/test/components/normReferences.spec.ts b/frontend/test/components/normReferences.spec.ts
@@ -58,13 +58,6 @@ describe("Norm references", () => {
     Promise.resolve({ status: 200, data: dropdownAbbreviationItems }),
   )
 
-  vi.spyOn(
-    comboboxItemService,
-    "getRisAbbreviationsAwesome",
-  ).mockImplementation(() =>
-    Promise.resolve({ status: 200, data: dropdownAbbreviationItems }),
-  )
-
   it("renders empty norm reference in edit mode, when no norm references in list", () => {
     renderComponent()
     expect(screen.getAllByLabelText("Listen Eintrag").length).toBe(1)