feat: add method to customize Select overlay width (#6472)

vaadin · Jul 26, 2024 · 21202cb · 21202cb
1 parent 403b180
commit 21202cb
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 0 deletions.
diff --git a/...flow-parent/vaadin-select-flow/src/main/java/com/vaadin/flow/component/select/Select.java b/...flow-parent/vaadin-select-flow/src/main/java/com/vaadin/flow/component/select/Select.java
@@ -26,10 +26,12 @@
 import com.vaadin.flow.component.HasAriaLabel;
 import com.vaadin.flow.component.HasComponents;
 import com.vaadin.flow.component.HasPlaceholder;
+import com.vaadin.flow.component.HasSize;
 import com.vaadin.flow.component.ItemLabelGenerator;
 import com.vaadin.flow.component.Synchronize;
 import com.vaadin.flow.component.Tag;
 import com.vaadin.flow.component.UI;
+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.select.data.SelectDataView;
@@ -781,6 +783,31 @@ public void removeAll() {
         getChildren().forEach(this::remove);
     }
 
+    /**
+     * 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-select-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));
+    }
+
     /**
      * Set true to open the dropdown overlay.
      *

diff --git a/...-parent/vaadin-select-flow/src/test/java/com/vaadin/flow/component/select/SelectTest.java b/...-parent/vaadin-select-flow/src/test/java/com/vaadin/flow/component/select/SelectTest.java
@@ -24,6 +24,7 @@
 import com.vaadin.flow.component.HasAriaLabel;
 import com.vaadin.flow.component.HasValue;
 import com.vaadin.flow.component.UI;
+import com.vaadin.flow.component.Unit;
 import com.vaadin.flow.component.html.Span;
 import com.vaadin.flow.component.select.data.SelectListDataView;
 import com.vaadin.flow.component.shared.HasOverlayClassName;
@@ -864,6 +865,24 @@ public void setNoVerticalOverlap() {
         Assert.assertFalse(select.isNoVerticalOverlap());
     }
 
+    @Test
+    public void setOverlayWidth() {
+        Select<String> select = new Select<>();
+
+        select.setOverlayWidth(null);
+        Assert.assertNull(
+                select.getStyle().get("--vaadin-select-overlay-width"));
+        select.setOverlayWidth("30em");
+        Assert.assertEquals("30em",
+                select.getStyle().get("--vaadin-select-overlay-width"));
+        select.setOverlayWidth(-1, Unit.EM);
+        Assert.assertNull(
+                select.getStyle().get("--vaadin-select-overlay-width"));
+        select.setOverlayWidth(100, Unit.PIXELS);
+        Assert.assertEquals("100.0px",
+                select.getStyle().get("--vaadin-select-overlay-width"));
+    }
+
     @Test
     public void unregisterOpenedChangeListenerOnEvent() {
         var listenerInvokedCount = new AtomicInteger(0);