web-components icon indicating copy to clipboard operation
web-components copied to clipboard

Multi-select keeps expanding even though there's enough room for multiple chips

Open HerbertsVaadin opened this issue 8 months ago • 3 comments

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.

keep-expanding

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

  1. Create multi-select field with AutoExpandMode.HORIZONTAL
  2. Place it in a container (div / horizontal layout..) where it can expand.
  3. 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

HerbertsVaadin avatar Dec 01 '23 13:12 HerbertsVaadin