Placeholder for DBSelect with variant floating is moved down (`:focus-within`)

[d-koppenhagen]

Which generators are affected?

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

Reproduction case

I created a playground (Stackblitz) for reproduction:

• https://stackblitz.com/edit/db-ux-react-dbselect-floating-invalid-placeholder?file=src%2FApp.tsx,src%2Findex.scss

1. Open the Playground
2. Focus the select element (maybe use the Chrome DevTools: Force State → :focus-within()
3. The placeholder is moved down and now overlaps with the bottom border

Expected Behaviour

No overlap with the border. Just like DBInput (I added it to the playground for comparison)

Screenshots

Browser version

None

Add any other context about the problem here.

I reported this only for React but it is possibly a general CSS bug related to all Framworks.

Which DB business unit do you work for?

DB Systel GmbH (please name your customer below)

”DB Systel” please enter your customer / ”other” please enter your area or business unit.

No response

What project are you working on?

Mobility4All