Skip to content

When SelectControl is multiple, the styles are broken #46623

@jakeparis

Description

@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

Screenshot 2022-12-16 at 2 50 20 PM

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    [Package] Components/packages/components[Type] BugAn existing feature does not function as intended

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions