web-components
web-components copied to clipboard
Multi-select keeps expanding even though there's enough room for multiple chips
Description
It seems strange to me, as a user, that every time I select a value and another chip is added, the field expands, even though the chip would comfortably fit into the available space, with room available for entering text.
This reduces the room available for surrounding components unnecessarily (as you'll see radio-button group collapses in the gif below)
This is with AutoExpandMode.HORIZONTAL
.
Similar to #6722
Expected outcome
Chip should be added to the field, but the field should not expand if it can still fits all the chips comfortably, with enough room for entering text.
Minimal reproducible example
var multiSelect = new MultiSelectComboBox<String>();
multiSelect.setLabel("Expanding multi-select");
multiSelect.setAutoExpand(MultiSelectComboBox.AutoExpandMode.HORIZONTAL);
multiSelect.setItems("One", "Two", "Three", "Four", "Five", "Six", "Seven", "Eight", "Nine", "Ten", "Eleven",
"Twelve", "Thirteen", "Fourteen");
var row = new HorizontalLayout(multiSelect);
row.setWidth("600px");
Steps to reproduce
- Create multi-select field with AutoExpandMode.HORIZONTAL
- Place it in a container (div / horizontal layout..) where it can expand.
- Start selecting values in multi-select and observe it taking more space than necessary.
Environment
Vaadin version(s): 24.3.0.beta-1 OS: Windows 11 Browsers: Firefox 120.0, Chrome 119.0
Browsers
Chrome, Firefox