DBCustomSelect: crashes Webpage on click outside selectable elements (e.g. infotext)

[annsch]

Which generators are impacted?

• All
• HTML
• React
• Angular
• Vue
• Web components
• Power Apps

Reproduction case

when click on invalid error message the whole webpage crashes:

1. search a string that does not exist in the options list
2. click on the "no results" text
3. the whole web page crashes

Expected Behaviour

no crash

Screenshots

No response

Browser version

None

Add any other context about the problem here.

No response

[mfranzke]

@annsch thanks a lot for your feedback. It doesn't happen on https://design-system.deutschebahn.com/core-web/version/v2.0.2/components/data-input/custom-select/overview?page=show+search – have you tried it in isolation of your current application ?

[annsch]

@mfranzke it seems that it occurs only with large datasets. I had a chat with @nmerget who told me that he had this issue before.

[flipswitchingmonkey]

Can confirm (for Vue):

CleanShot_20250512_131551.mp4

[flipswitchingmonkey]

Seems to happen when the Custom Select is inside a card and the Click event is triggered:

If I remove that event in the debugger, it does not crash.

Also, it does not seem to be related to the search (or amount of entries), event with few entries, if you click on the very edge of the component (see arrow), it will crash:

[flipswitchingmonkey]

Found the bad event:

It's the focusOut() event on the wrapping details element that is causing the crash

[nmerget]

@flipswitchingmonkey @annsch Can you provide a simple example, I can't reproduce the bug in the current implementation :(

[nmerget]

We figured it out it was some kind of race condition between contains and details.open = false