Merge pull request #1249 from danskernesdigitalebibliotek/fix/DDFLSBP…

…-601-avanceret-sogning-dropdowns-benytter-forkerte-sogekoder Add unique ids for checkboxes [DDFLSBP-601]
danskernesdigitalebibliotek · Jun 5, 2024 · b604e9f · b604e9f
2 parents 91f5f90 + 421b180
commit b604e9f
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 2 deletions.
diff --git a/src/apps/advanced-search/advanced-search.test.ts b/src/apps/advanced-search/advanced-search.test.ts
@@ -47,6 +47,18 @@ describe("Search Result", () => {
       "contain",
       "'Harry' AND 'Prince' AND term.generalmaterialtype='bøger'"
     );
+    cy.getBySel("advanced-search-accessibility")
+      .first()
+      .click()
+      .find("li")
+      .eq(2)
+      .should("contain", "Online")
+      .click();
+    cy.getBySel("advanced-search-accessibility").first().click();
+    cy.getBySel("preview-section", true).should(
+      "contain",
+      "'Harry' AND 'Prince' AND term.generalmaterialtype='bøger' AND term.accesstype='online'"
+    );
   });
 
   it("Should reset the form upon reset button click", () => {

diff --git a/src/components/multiselect/Multiselect.tsx b/src/components/multiselect/Multiselect.tsx
@@ -1,4 +1,4 @@
-import React, { FC, useRef, useState } from "react";
+import React, { FC, useId, useRef, useState } from "react";
 import IconExpand from "@danskernesdigitalebibliotek/dpl-design-system/build/icons/collection/ExpandMore.svg";
 import { useMultipleSelection } from "downshift";
 import clsx from "clsx";
@@ -30,6 +30,7 @@ const Multiselect: FC<MultiselectProps> = ({
   defaultValue = [],
   updateExternalState
 }) => {
+  const id = useId();
   const t = useText();
   const ref = useRef(null);
   const [isDropdownOpen, setIsDropdownOpen] = useState(false);
@@ -189,7 +190,7 @@ const Multiselect: FC<MultiselectProps> = ({
                 </span>
                 <div className="checkbox multiselect__checkbox">
                   <CheckBox
-                    id={index.toString()}
+                    id={`${id}-${index.toString()}`}
                     selected={
                       !!selectedItems.find(
                         (selected) => selected.value === item.value