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

[ludviklund]

Description

The feature that was added where you could init a dropdown with an ID did not work.
The change I made changed querySelectorAll to findById and querySelector, and because these only return a single element, it broke these conditionals:

if (!dropdownContainers.length) {
	console.warn("No dropdown container found");

	return null;
}

if (!dropdownToggles.length) {
	console.warn("No dropdown toggle button found");

	return null;
}

if (!dropdownMenu.length) {
	console.warn("No dropdown menu found");

	return null;
}

It also broke a forEach loop, but we returned null before we even got there.

Motivation and Context

How Has This Been Tested?

I created two unit tests to test the issue, which basically just renders a dropdown component and makes sure it doesn't log any errors when initialized with ID, and also that it does log error when initialized with an ID that doesn't exist.

Screenshots (if appropriate):

Types of changes

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to change)

Checklist:

• My code follows the code style of this project.
• My change requires a change to the documentation.
• I have updated the documentation accordingly.
• I have read the CONTRIBUTING document.
• I have updated the CHANGELOG document.
• I have added tests to cover my changes.
• All new and existing tests passed.

Review instructions

Review instructions

[CLAassistant]

Thank you for your submission! We really appreciate it. Like many open source projects, we ask that you sign our Contributor License Agreement before we can accept your contribution.
_{You have signed the CLA already but the status is still pending? Let us recheck it.}

[github-actions]

Size Change: +42 B (0%)

Total Size: 1.16 MB

ℹ️ View Unchanged

Filename	Size	Change
dist/designguide/scripts/dg-dashboard.js	73.2 kB	0 B
dist/designguide/scripts/dg.js	24.9 kB	+11 B (+0.04%)
dist/designguide/styles/documentation-payex.css	10 kB	0 B
dist/designguide/styles/documentation-swedbankpay.css	9.12 kB	0 B
dist/designguide/styles/payex.css	51.5 kB	0 B
dist/designguide/styles/swedbankpay.css	49 kB	0 B
dist/scripts/3563.js	72.1 kB	0 B
dist/scripts/dg-dashboard.js	73.2 kB	0 B
dist/scripts/dg.js	24.9 kB	+11 B (+0.04%)
dist/scripts/payex.js	325 kB	+10 B (0%)
dist/scripts/swedbankpay.js	325 kB	+10 B (0%)
dist/styles/documentation-payex.css	10 kB	0 B
dist/styles/documentation-swedbankpay.css	9.12 kB	0 B
dist/styles/payex.css	51.5 kB	0 B
dist/styles/swedbankpay.css	49 kB	0 B

_{compressed-size-action}