feat: add ComboBox.setOverlayWidth() and MultiSelectComboBox.setOverl…

…ayWidth() (#5743) * feat: add ComboBox.setDropdownWidth() and MultiSelectComboBox.setDropdownWidth(). Fixes #2331 * refactoring: rename setDropdownWidth() to setOverlayWidth() * refactoring: rename setDropdownWidth() to setOverlayWidth() * align test names --------- Co-authored-by: Sascha Ißbrücker <sissbruecker@vaadin.com>
vaadin · Jan 15, 2024 · a337f0f · a337f0f
1 parent ff5c995
commit a337f0f
Show file tree

Hide file tree

Showing 4 changed files with 90 additions and 2 deletions.
diff --git a/...rent/vaadin-combo-box-flow/src/main/java/com/vaadin/flow/component/combobox/ComboBox.java b/...rent/vaadin-combo-box-flow/src/main/java/com/vaadin/flow/component/combobox/ComboBox.java
@@ -20,7 +20,9 @@
 import java.util.Objects;
 import java.util.stream.Stream;
 
+import com.vaadin.flow.component.HasSize;
 import com.vaadin.flow.component.Tag;
+import com.vaadin.flow.component.Unit;
 import com.vaadin.flow.component.dependency.JsModule;
 import com.vaadin.flow.component.dependency.NpmPackage;
 import com.vaadin.flow.component.shared.HasPrefix;
@@ -326,4 +328,29 @@ protected boolean isSelected(T item) {
     public T getEmptyValue() {
         return null;
     }
+
+    /**
+     * Sets the dropdown overlay width.
+     *
+     * @param width
+     *            the new dropdown width. Pass in null to set the dropdown width
+     *            back to the default value.
+     */
+    public void setOverlayWidth(String width) {
+        getStyle().set("--vaadin-combo-box-overlay-width", width);
+    }
+
+    /**
+     * Sets the dropdown overlay width. Negative number implies unspecified size
+     * (the dropdown width is reverted back to the default value).
+     *
+     * @param width
+     *            the width of the dropdown.
+     * @param unit
+     *            the unit used for the dropdown.
+     */
+    public void setOverlayWidth(float width, Unit unit) {
+        Objects.requireNonNull(unit, "Unit can not be null");
+        setOverlayWidth(HasSize.getCssSize(width, unit));
+    }
 }
diff --git a/...-combo-box-flow/src/main/java/com/vaadin/flow/component/combobox/MultiSelectComboBox.java b/...-combo-box-flow/src/main/java/com/vaadin/flow/component/combobox/MultiSelectComboBox.java
@@ -15,15 +15,15 @@
  */
 package com.vaadin.flow.component.combobox;
 
-import com.vaadin.flow.component.AbstractField;
 import com.vaadin.flow.component.AttachEvent;
 import com.vaadin.flow.component.ComponentEventListener;
 import com.vaadin.flow.component.ComponentUtil;
+import com.vaadin.flow.component.HasSize;
 import com.vaadin.flow.component.Tag;
+import com.vaadin.flow.component.Unit;
 import com.vaadin.flow.component.dependency.JsModule;
 import com.vaadin.flow.component.dependency.NpmPackage;
 import com.vaadin.flow.component.shared.HasThemeVariant;
-import com.vaadin.flow.component.shared.InputField;
 import com.vaadin.flow.data.provider.DataCommunicator;
 import com.vaadin.flow.data.provider.DataKeyMapper;
 import com.vaadin.flow.data.provider.IdentifierProviderChangeEvent;
@@ -583,4 +583,29 @@ private void removeNullValuesFromJsonObject(JsonObject jsonObject) {
             }
         }
     }
+
+    /**
+     * Sets the dropdown overlay width.
+     *
+     * @param width
+     *            the new dropdown width. Pass in null to set the dropdown width
+     *            back to the default value.
+     */
+    public void setOverlayWidth(String width) {
+        getStyle().set("--vaadin-multi-select-combo-box-overlay-width", width);
+    }
+
+    /**
+     * Sets the dropdown overlay width. Negative number implies unspecified size
+     * (the dropdown width is reverted back to the default value).
+     *
+     * @param width
+     *            the width of the dropdown.
+     * @param unit
+     *            the unit used for the dropdown.
+     */
+    public void setOverlayWidth(float width, Unit unit) {
+        Objects.requireNonNull(unit, "Unit can not be null");
+        setOverlayWidth(HasSize.getCssSize(width, unit));
+    }
 }
diff --git a/.../vaadin-combo-box-flow/src/test/java/com/vaadin/flow/component/combobox/ComboBoxTest.java b/.../vaadin-combo-box-flow/src/test/java/com/vaadin/flow/component/combobox/ComboBoxTest.java
@@ -21,6 +21,7 @@
 import com.vaadin.flow.component.Tag;
 import com.vaadin.flow.component.Text;
 import com.vaadin.flow.component.UI;
+import com.vaadin.flow.component.Unit;
 import com.vaadin.flow.component.shared.InputField;
 import com.vaadin.flow.data.binder.Binder;
 import com.vaadin.flow.di.Instantiator;
@@ -210,6 +211,23 @@ public void implementsInputField() {
                 comboBox instanceof InputField<AbstractField.ComponentValueChangeEvent<ComboBox<String>, String>, String>);
     }
 
+    @Test
+    public void setOverlayWidth() {
+        ComboBox<String> comboBox = new ComboBox<>();
+        comboBox.setOverlayWidth(null);
+        Assert.assertNull(
+                comboBox.getStyle().get("--vaadin-combo-box-overlay-width"));
+        comboBox.setOverlayWidth("30em");
+        Assert.assertEquals("30em",
+                comboBox.getStyle().get("--vaadin-combo-box-overlay-width"));
+        comboBox.setOverlayWidth(-1, Unit.EM);
+        Assert.assertNull(
+                comboBox.getStyle().get("--vaadin-combo-box-overlay-width"));
+        comboBox.setOverlayWidth(100, Unit.PIXELS);
+        Assert.assertEquals("100.0px",
+                comboBox.getStyle().get("--vaadin-combo-box-overlay-width"));
+    }
+
     @Tag("div")
     private static class TestPrefix extends Component {
     }

diff --git a/...bo-box-flow/src/test/java/com/vaadin/flow/component/combobox/MultiSelectComboBoxTest.java b/...bo-box-flow/src/test/java/com/vaadin/flow/component/combobox/MultiSelectComboBoxTest.java
@@ -17,6 +17,7 @@
 
 import com.vaadin.flow.component.AbstractField;
 import com.vaadin.flow.component.HasValue;
+import com.vaadin.flow.component.Unit;
 import com.vaadin.flow.component.shared.InputField;
 import elemental.json.JsonArray;
 import org.junit.Assert;
@@ -336,4 +337,21 @@ public void setKeepFilter() {
         Assert.assertTrue(
                 comboBox.getElement().getProperty("keepFilter", true));
     }
+
+    @Test
+    public void setOverlayWidth() {
+        MultiSelectComboBox<String> comboBox = new MultiSelectComboBox<>();
+        comboBox.setOverlayWidth(null);
+        Assert.assertNull(comboBox.getStyle()
+                .get("--vaadin-multi-select-combo-box-overlay-width"));
+        comboBox.setOverlayWidth("30em");
+        Assert.assertEquals("30em", comboBox.getStyle()
+                .get("--vaadin-multi-select-combo-box-overlay-width"));
+        comboBox.setOverlayWidth(-1, Unit.EM);
+        Assert.assertNull(comboBox.getStyle()
+                .get("--vaadin-multi-select-combo-box-overlay-width"));
+        comboBox.setOverlayWidth(100, Unit.PIXELS);
+        Assert.assertEquals("100.0px", comboBox.getStyle()
+                .get("--vaadin-multi-select-combo-box-overlay-width"));
+    }
 }