feat(dropdown-select): ensure single dropdown open at a time (#2307)

Implement global state to track the active dropdown. Modify handleClick method to close any other open dropdown before opening the clicked one. This ensures that only one dropdown can be open at a time.

packages/components/src/components/dropdown-select/dropdown-select.tsx

@@ -7,8 +7,8 @@ import {
   State,
   Watch,
   Event,
-  EventEmitter,
-  VNode,
+  type EventEmitter,
+  type VNode,
 } from '@stencil/core';
 import classNames from 'classnames';
 import statusNote from '../../utils/status-note';
@@ -228,6 +228,8 @@ function isInView(element: HTMLElement) {
   );
 }
 
+let activeDropdown = null;
+
 @Component({
   tag: 'scale-dropdown-select',
   styleUrl: 'dropdown-select.css',
@@ -461,7 +463,15 @@ export class DropdownSelect {
   };
 
   handleClick = () => {
+    // * This is a fix to prevent the dropdown from being opened when the user clicks on another combobox.
+    // ! https://github.com/telekom/scale/issues/2285
+    if (activeDropdown && activeDropdown !== this) {
+      activeDropdown.setOpen(false);
+    }
+
     this.setOpen(!this.open);
+    activeDropdown = this;
+
     const indexOfValue = readOptions(this.hostElement).findIndex(
       ({ value }) => value === this.value
     );