Select-Control styles break multiple select fields

[MatzeKitt]

Describe the bug
The default select styles force displaying every select to a regular select field. However, a select[multiple] field shouldn’t be forced to have a drop-down arrow nor a maximum height of 30 pixels.

To reproduce
Steps to reproduce the behavior:

1. Create a SelectControl with multiple attribute.

Expected behavior
A multiple select field is not styled similar to a regular select field without multiple attribute.

Editor version (please complete the following information):

• WordPress version: 5.6-RC1-49667
• Tested with and without the Gutenberg plugin
• If the Gutenberg plugin is installed, which version is it? 9.4.1

Desktop (please complete the following information):

• OS: macOS Big Sur
• Browser: Safari
• Version: 14.0.1

[tellthemachines]

Can confirm SelectControl styles are broken when using multiple, and issue is visible in Storybook too.

[ddryo]

I can reproduce this problem as well.

[mototeam]

We have the same issue in WordPress 5.6
Getwid plugin. Screenshot https://prnt.sc/w0i89f
Timetable plugin. Screenshot https://prnt.sc/w0i99q
Is there any plan to fix this in the near future or should we as developers look for a quick fix ourselves?

[MatzeKitt]

As a quick fix, I’m using the following CSS in my block:

.impressum-select-multiple.impressum-select-multiple.impressum-select-multiple select[multiple] {
	height: auto;
	padding: 8px;
	
	+ .components-input-control__suffix {
		display: none;
	}
}

And I needed to surround my <SelectControl> with a <div class="impressum-select-multiple">.

[Xoiatix]

I can reproduce this problem too.

[JohnRDOrazio]

I started getting this problem too, the component is set to a fixed height of 30px instead of automatically expanding (as a "multiple" select should).
I see the problem is here: https://github.com/WordPress/gutenberg/blob/master/packages/components/src/select-control/styles/select-control-styles.js

[JohnRDOrazio]

I also see, reading the component handbook, that the SelectControl is being encouraged for single selections, not for multiple selections. I wonder if this is a simple oversight?
https://developer.wordpress.org/block-editor/components/select-control/

SelectControl allow users to select from a single-option menu.

Use a select control when: You want users to select a single option from a list.

Use selects when you have multiple options, and can only choose one.

And yet on the same page it does talk about the possibility of using the multiple attribute:

One important prop to refer is value. If multiple is true, value should be an array with the values of the selected options. If multiple is false, value should be equal to the value of the selected option.

And towards the bottom of the page, multiple is actually listed among the possible attributes:

multiple # If this property is added, multiple values can be selected. The value passed should be an array.
– Type: Boolean
– Required: No

[JohnRDOrazio]

I made PR #28811 to fix the wording in the README for the SelectControl component.

[JohnRDOrazio]

Since a SelectControl component that has the multiple property should show a list of options instead of a dropdown, it shouldn't be needing the dropdown arrow, which I believe is defined here:

gutenberg/packages/components/src/select-control/styles/select-control-styles.js

Lines 82 to 97 in 8d1d96d

	export const DownArrowWrapper = styled.div`
	align-items: center;
	bottom: 0;
	box-sizing: border-box;
	display: flex;
	padding: 0 4px;
	pointer-events: none;
	position: absolute;
	top: 0;
	${ rtl( { right: 0 } )() }
	svg {
	display: block;
	}
	`;

and here:

gutenberg/packages/components/src/select-control/index.js

Lines 92 to 94 in 8d1d96d

	<DownArrowWrapper>
	<Icon icon={ chevronDown } size={ 18 } />
	</DownArrowWrapper>

[tlewap]

we have same problem with multiple select field

[mediaformat]

There are additional problems with the default styles when using multiple

• Longer options are hidden, because of white-space: pre
  
• Options with text flowing onto a second line, can look confusing, there might be accessibility issues
  
• Adding some zebra striping seems to help (I also removed the padding-right that made space for the down arrow).
  

So I ended up with this

select[multiple] {
  
	height: auto;
  
	padding-right: 8px;

 
	option {

		white-space: normal;
	
		&:nth-of-type(2n) {
	  
			background-color: #efefef;
	
		}
  
	}

}

Shall I attempt a PR?

[leadclown]

running into the same issue multiple times. why isn't this fixed yet? why is this not high priority?

currently we can't use multiple selects.

trying combobox instead but please... fix your bugs!

[mediaformat]

I was actually trying to find this issue again, so thanks @leadclown for your "contribution" 😜.

There are additional problems ... Longer options are hidden

Some of my original comments did not consider the Design Guidelines for this component

Menu Items

Menu items should be short — ideally, single words — and use sentence capitalization.
Do not use full sentences inside menu items.

Otherwise, I'm curious what Design folks think about the default height of the component with multiple it seems really small to me.

[mirka]

Sorry for the delay, this issue just popped onto my radar.

@jasmussen Do we have any design guidance for this? It's clear that this multiple variant isn't used anywhere in Gutenberg, in favor of other UI components (e.g. FormTokenField). Should we deprecate/discourage multiple select UIs, and suggest that people use alternatives?

[jasmussen]

Tricky one indeed. I can't think of a core reason to have this interface, I always found it fiddly, using modifier keys to add to a selection, and if you misclick you deselect all and have to start over. I don't have strong opinions, and there's likely a great deal of context I'm missing. What can I provide, designwise, to help move things forward?

[mediaformat]

@jasmussen You are right, on desktop I prefer the formtokenfield component. On mobile this one does have a more native style UI, compared to formtokenfield

[mirka]

I've discussed this with several components folks, and the general direction we converged on was something like:

• When multiple, remove the size-dependent height/padding and just reveal the entire select. Basically, we'll just rely on native browser styling.
• In the documentation for the multiple prop, we'll recommend alternatives (e.g. FormTokenField, CheckboxControl) which are more in line with the UI patterns we use in Gutenberg.

@mediaformat Are you still available to rebase/tweak your PR (#43213)? If not, I'd be happy to take over 🙂

[jakeparis]

This has been broken for over two years and it's still not fixed? I mean, it hardly seems a massive change.

[mediaformat]

Hi @mirka thanks for the follow up, I'll finish the PR!