Fix NativeSelect inner component size (#8737)

Fixes #8702 

3 files changed, 81 insertions, 0 deletions

diff --git a/uitest/src/main/java/com/vaadin/tests/components/nativeselect/NativeSelectWidth.java b/uitest/src/main/java/com/vaadin/tests/components/nativeselect/NativeSelectWidth.java
new file mode 100644
index 0000000000..c0f5bc4d6d
--- /dev/null
+++ b/uitest/src/main/java/com/vaadin/tests/components/nativeselect/NativeSelectWidth.java
@@ -0,0 +1,40 @@
+package com.vaadin.tests.components.nativeselect;
+
+import java.util.Arrays;
+
+import com.vaadin.server.VaadinRequest;
+import com.vaadin.tests.components.AbstractTestUI;
+import com.vaadin.ui.HorizontalLayout;
+import com.vaadin.ui.NativeSelect;
+import com.vaadin.ui.TextArea;
+
+public class NativeSelectWidth extends AbstractTestUI {
+    public static final String LOREM_IPSUM = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, "
+            + "sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, "
+            + "quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor "
+            + "in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat "
+            + "cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.";
+
+    @Override
+    protected void setup(VaadinRequest request) {
+        NativeSelect<String> nativeSelect = new NativeSelect<>("Select:",
+                Arrays.asList("Short item1", "Short item2", LOREM_IPSUM));
+        nativeSelect.setValue(LOREM_IPSUM);
+        nativeSelect.setWidth("200px");
+        nativeSelect.setHeight("120px");
+
+        NativeSelect<String> nativeSelect2 = new NativeSelect<>("Select:",
+                Arrays.asList("Short 1", "Short 2", "A bit longer"));
+        nativeSelect2.setSizeUndefined();
+
+        TextArea placeholder = new TextArea("Placeholder",
+                nativeSelect.getClass().getName());
+        placeholder.setReadOnly(true);
+        placeholder.setSizeFull();
+        HorizontalLayout horizontalLayout = new HorizontalLayout(nativeSelect,
+                nativeSelect2, placeholder);
+        horizontalLayout.setWidth("500px");
+        horizontalLayout.setHeight("500px");
+        addComponent(horizontalLayout);
+    }
+}
diff --git a/uitest/src/main/java/com/vaadin/tests/fonticon/VaadinIconSet.java b/uitest/src/main/java/com/vaadin/tests/fonticon/VaadinIconSet.java
index fe1436d0a7..5e9a0158d8 100644
--- a/uitest/src/main/java/com/vaadin/tests/fonticon/VaadinIconSet.java
+++ b/uitest/src/main/java/com/vaadin/tests/fonticon/VaadinIconSet.java
@@ -140,6 +140,7 @@ public class VaadinIconSet extends AbstractTestUI {
                 ((ComboBox) sel).setItemIconGenerator(item -> icon);
             }
             gl.addComponent(sel);
+            sel.setWidth("100%");
         }
 
         // MenuBar, caption + item + sub-item icons
diff --git a/uitest/src/test/java/com/vaadin/tests/components/nativeselect/NativeSelectWidthTest.java b/uitest/src/test/java/com/vaadin/tests/components/nativeselect/NativeSelectWidthTest.java
new file mode 100644
index 0000000000..ad7d5f1d97
--- /dev/null
+++ b/uitest/src/test/java/com/vaadin/tests/components/nativeselect/NativeSelectWidthTest.java
@@ -0,0 +1,40 @@
+package com.vaadin.tests.components.nativeselect;
+
+import static org.junit.Assert.assertEquals;
+
+import org.junit.Before;
+import org.junit.Test;
+import org.openqa.selenium.WebElement;
+
+import com.vaadin.testbench.By;
+import com.vaadin.testbench.elements.NativeSelectElement;
+import com.vaadin.testbench.parallel.BrowserUtil;
+import com.vaadin.tests.tb3.MultiBrowserTest;
+
+public class NativeSelectWidthTest extends MultiBrowserTest {
+
+    @Before
+    public void setUp() {
+        openTestURL();
+    }
+
+    @Test
+    public void testWidthIs200Px() {
+        WebElement nativeSelect = $(NativeSelectElement.class).first()
+                .findElement(By.tagName("select"));
+        assertEquals(200, nativeSelect.getSize().getWidth());
+        if (!BrowserUtil.isPhantomJS(getDesiredCapabilities())) {
+            // PhantomJS does not support explicit <select> height
+            assertEquals(120, nativeSelect.getSize().getHeight());
+        }
+    }
+
+    @Test
+    public void testUndefinedWidth() {
+        WebElement nativeSelect = $(NativeSelectElement.class).get(1)
+                .findElement(By.tagName("select"));
+        assertLessThan(
+                "Undefined width NativeSelect should be narrower than 200px",
+                nativeSelect.getSize().getWidth(), 200);
+    }
+}