ScaleDropdownSelect does not close when clicking on another one

[jp-ys]

Scale Version
"@telekom/scale-components": "3.0.0-beta.147",
"@telekom/scale-components-react": "3.0.0-beta.147",

Framework and version
"react": "18.2.0",

Current Behavior
When multiple instances of ScaleDropdownSelect are rendered at the same time and clicking on each after one another the previously opened dropdowns do not close.
Note: Do not click outside of the dropdowns, but directly on the other one to open it.

Expected Behavior
The dropdown losing the focus should close.

Code Reproduction
Render this component in a react App and click on the dropdowns randomly:

import { ScaleDropdownSelect, ScaleDropdownSelectItem} from "@telekom/scale-components-react";

const Dropdowns = () => {
  return (<div>
    <ScaleDropdownSelect
      comboboxId="ds1"
    >
      <ScaleDropdownSelectItem value="ds1-1">ds1-1</ScaleDropdownSelectItem>
      <ScaleDropdownSelectItem value="ds1-2">ds1-2</ScaleDropdownSelectItem>
      <ScaleDropdownSelectItem value="ds1-3">ds1-3</ScaleDropdownSelectItem>
      <ScaleDropdownSelectItem value="ds1-4">ds1-4</ScaleDropdownSelectItem>
    </ScaleDropdownSelect>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/>
    <ScaleDropdownSelect
      comboboxId="ds2"
    >
      <ScaleDropdownSelectItem value="ds2-1">ds2-1</ScaleDropdownSelectItem>
      <ScaleDropdownSelectItem value="ds2-2">ds2-2</ScaleDropdownSelectItem>
      <ScaleDropdownSelectItem value="ds2-3">ds2-3</ScaleDropdownSelectItem>
      <ScaleDropdownSelectItem value="ds2-4">ds2-4</ScaleDropdownSelectItem>
    </ScaleDropdownSelect>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/>
    <ScaleDropdownSelect
      comboboxId="ds3"
    >
      <ScaleDropdownSelectItem value="ds3-1">ds3-1</ScaleDropdownSelectItem>
      <ScaleDropdownSelectItem value="ds3-2">ds3-2</ScaleDropdownSelectItem>
      <ScaleDropdownSelectItem value="ds3-3">ds3-3</ScaleDropdownSelectItem>
      <ScaleDropdownSelectItem value="ds3-4">ds3-4</ScaleDropdownSelectItem>
    </ScaleDropdownSelect>
  </div>);
}

Desktop (please complete the following information):

• OS: Windows 11
• Browser
• Chrome Version Version 122.0.6261.58 (Offizieller Build) (64-Bit)
• Edge Version 121.0.2277.128 (Offizielles Build) (64-Bit)
• On Firefox could not reproduce the issue

[MihailsFX1nce]

Scale Version
"@telekom/scale-components-react": "3.0.0-beta.137",
"@telekom/scale-components": "3.0.0-beta.137",

Framework and version
"react": "^18.2.0",

We faced the same behaviour as described above. Using multiple ScaleDropdownSelect on the same page, dropdowns are not closing when another is being opened. On small viewports (mobile): option lists start overlapping what is causing bad UX.

Probably, blur event is not firing since user is again clicked on another ScaleDropdownSelect and instead focus event is fired for new clicked ScaleDropdownSelect. Not outside. When second ScaleDropdownSelect is opened/closed, previous one is simply freeze.

[tshimber]

@MihailsFX1nce @jp-ys hi guys! do i understand correct, that it is fixed? for me works fine with the latest version

[MihailsFX1nce]

@tshimber, yes, you are right. We also don't have this issue anymore. I think, the issue is fixed.

[amir-ba]

I will close the issue , due to it being fixed.