diff --git a/src/scripts/main/dropdown/index.js b/src/scripts/main/dropdown/index.js
index 2c09e0d10b..5538ef824b 100644
--- a/src/scripts/main/dropdown/index.js
+++ b/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(
diff --git a/src/scripts/main/dropdown/index.test.js b/src/scripts/main/dropdown/index.test.js
index c77f4a956b..0951370655 100644
--- a/src/scripts/main/dropdown/index.test.js
+++ b/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();
+
+ 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();
+
+ console.error = jest.fn();
+
+ expect(dropdown.init("bar")).toBeNull();
+ expect(console.error).toHaveBeenCalled();
+ });
});
it("button click gives dropdown-div class of active", () => {