SWED-2505 Fixed issue where dropdown could not be initialized with ID

src/scripts/main/dropdown/index.js

@@ -56,17 +56,21 @@ const init = (id) => {
 	let dropdownMenu;
 
 	if (id) {
-		dropdownContainers = document?.getElementById(id);
+		/* Find the dropdown container by id, and wrap it in a NodeList like structure to 
+		avoid friction in the rest of the code */
+		const element = document.getElementById(id);
+		dropdownContainers = element ? [element] : [];
 
-		if (!dropdownContainers) {
+		if (!dropdownContainers.length) {
 			console.error(
 				`No dropdown found corresponding with the id provided in dropdown.init() passing this id value: "${id}"`,
 			);
 
 			return null;
 		}
-		dropdownToggles = dropdownContainers.querySelector(SELECTORS.TOGGLE);
-		dropdownMenu = dropdownContainers.querySelector(SELECTORS.DROPDOWNMENU);
+
+		dropdownToggles = element.querySelectorAll(SELECTORS.TOGGLE);
+		dropdownMenu = element.querySelectorAll(SELECTORS.DROPDOWNMENU);
 	} else {
 		dropdownContainers = document.querySelectorAll(SELECTORS.DROPDOWNLIST);
 		dropdownToggles = document.querySelectorAll(

src/scripts/main/dropdown/index.test.js

@@ -1,7 +1,6 @@
 import React from "react";
-import { render, screen } from "@testing-library/react";
+import { render } from "@testing-library/react";
 import "@testing-library/jest-dom";
-import userEvent from "@testing-library/user-event";
 
 import dropdown from "./index";
 
@@ -50,6 +49,24 @@ describe("Scripts: Dropdown", () => {
 			expect(dropdown.init()).toBeNull();
 			expect(console.warn).toHaveBeenCalled();
 		});
+
+		it("initializes with ID", () => {
+			render(<Dropdown id="foo" />);
+
+			console.warn = jest.fn();
+
+			expect(dropdown.init("foo")).not.toBeNull();
+			expect(console.warn).not.toHaveBeenCalled();
+		});
+
+		it("init returns null if no dropdown with ID is found and prints a warning message", () => {
+			render(<Dropdown id="foo" />);
+
+			console.error = jest.fn();
+
+			expect(dropdown.init("bar")).toBeNull();
+			expect(console.error).toHaveBeenCalled();
+		});
 	});
 
 	it("button click gives dropdown-div class of active", () => {