When SelectControl is multiple, the styles are broken

[jakeparis]

Description

I've added the multiple prop to the <SelectControl />, and the rendered component doesn't look like a multi-select control. So I added my own style to increase the height of the element (so more than one element is visible at the same time, but is is still impossible to scroll the list. So I've also needed to add overflow: auto to the list to override the core style of overflow: hidden, and now it scrolls.

But even though these changes restored the functionality of the multi-select, increasing the height of the component resulted in the "dropdown" arrow on the right floating strangely.

Step-by-step reproduction instructions

1. add <SelectControl multiple options={[{label:'a',value:'a'},{label:'b',value:'b'},{label:'c',value:'c'},{label:'d',value:'d'},{label:'e',value:'e'},{label:'f',value:'f'},{label:'g',value:'g'},{label:'h',value:'h'},{label:'i',value:'i'},{label:'j',value:'j'},{label:'k',value:'k'},{label:'m',value:'m'},{label:'p',value:'p'}]} /> to your block.
2. See that you can't scroll list

Screenshots, screen recording, code snippet

Environment info

wordpress: version 6.1
gutenberg: core built-in version
theme: custom theme, but shouldn't matter

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

[ndiego]

This issue was reviewed in today's Editor Bug Scrub. I spun up a quick demo using the code examples from the docs and was able to confirm. The resulting screenshot is below.

[mirka]

Thanks for the report!

This has been on our radar, so closing in favor of #27166