When ComboBox popup opens to the left accommodate margin/border/padding.

Fixes vaadin#11718
Ansku · Oct 23, 2019 · d38fcc9 · d38fcc9
1 parent 3980e35
commit d38fcc9
Show file tree

Hide file tree

Showing 3 changed files with 80 additions and 8 deletions.
diff --git a/client/src/main/java/com/vaadin/client/ui/VComboBox.java b/client/src/main/java/com/vaadin/client/ui/VComboBox.java
@@ -791,6 +791,8 @@ public void setPosition(int offsetWidth, int offsetHeight) {
 
             updateMenuWidth(desiredWidth, naturalMenuWidth);
 
+            double menuMarginBorderPaddingWidth = getMarginBorderPaddingWidth(
+                    menu.getElement());
             if (BrowserInfo.get().isIE()
                     && BrowserInfo.get().getBrowserMajorVersion() < 11) {
                 // Must take margin,border,padding manually into account for
@@ -805,15 +807,13 @@ public void setPosition(int offsetWidth, int offsetHeight) {
                             .getStyle().getVisibility();
                     menu.getElement().getParentElement().getStyle()
                             .setVisibility(Visibility.VISIBLE);
-                    naturalMenuOuterWidth = WidgetUtil
-                            .getRequiredWidthDouble(menuFirstChild)
-                            + getMarginBorderPaddingWidth(menu.getElement());
+                    naturalMenuOuterWidth = WidgetUtil.getRequiredWidthDouble(
+                            menuFirstChild) + menuMarginBorderPaddingWidth;
                     menu.getElement().getParentElement().getStyle()
                             .setProperty("visibility", before);
                 } else {
-                    naturalMenuOuterWidth = WidgetUtil
-                            .getRequiredWidthDouble(menuFirstChild)
-                            + getMarginBorderPaddingWidth(menu.getElement());
+                    naturalMenuOuterWidth = WidgetUtil.getRequiredWidthDouble(
+                            menuFirstChild) + menuMarginBorderPaddingWidth;
                 }
 
                 /*
@@ -893,9 +893,11 @@ public void setPosition(int offsetWidth, int offsetHeight) {
                 }
             }
 
-            if (offsetWidth + left > Window.getClientWidth()) {
+            if (offsetWidth + menuMarginBorderPaddingWidth + left > Window
+                    .getClientWidth()) {
                 left = VComboBox.this.getAbsoluteLeft()
-                        + VComboBox.this.getOffsetWidth() - offsetWidth;
+                        + VComboBox.this.getOffsetWidth() - offsetWidth
+                        - (int) menuMarginBorderPaddingWidth;
                 if (left < 0) {
                     left = 0;
                     menu.setWidth(Window.getClientWidth() + "px");

diff --git a/uitest/src/main/java/com/vaadin/tests/components/combobox/ComboBoxAtRightEdge.java b/uitest/src/main/java/com/vaadin/tests/components/combobox/ComboBoxAtRightEdge.java
@@ -0,0 +1,43 @@
+package com.vaadin.tests.components.combobox;
+
+import java.util.Arrays;
+
+import com.vaadin.server.Page;
+import com.vaadin.server.VaadinRequest;
+import com.vaadin.tests.components.AbstractTestUI;
+import com.vaadin.ui.ComboBox;
+
+public class ComboBoxAtRightEdge extends AbstractTestUI {
+
+    @Override
+    protected void setup(VaadinRequest request) {
+        ComboBox<String> comboBox = new ComboBox<>("Long items");
+        comboBox.setPopupWidth(null);
+        comboBox.setItems(Arrays.asList("First Very long item to add",
+                "Second very long item to add", "Third very long item to add"));
+        comboBox.addStyleName("positionRight");
+
+        addComponent(comboBox);
+
+        Page.getCurrent().getStyles()
+                .add(".v-slot.v-slot-positionRight {float:right;}");
+        Page.getCurrent().getStyles()
+                .add(".removePadding {padding: 0px !important;}");
+
+        getLayout().setMargin(false);
+        getLayout().setSpacing(false);
+        getLayout().getParent().addStyleName("removePadding");
+        getLayout().getParent().removeStyleNames("v-margin-right",
+                "v-margin-left");
+    }
+
+    @Override
+    protected Integer getTicketNumber() {
+        return 11718;
+    }
+
+    @Override
+    protected String getTestDescription() {
+        return "ComboBox popup should fit completely in view, margin/border/padding included.";
+    }
+}
diff --git a/uitest/src/test/java/com/vaadin/tests/components/combobox/ComboBoxAtRightEdgeTest.java b/uitest/src/test/java/com/vaadin/tests/components/combobox/ComboBoxAtRightEdgeTest.java
@@ -0,0 +1,27 @@
+package com.vaadin.tests.components.combobox;
+
+import org.junit.Test;
+import org.openqa.selenium.WebElement;
+
+import com.vaadin.testbench.elements.ComboBoxElement;
+import com.vaadin.tests.tb3.MultiBrowserTest;
+
+public class ComboBoxAtRightEdgeTest extends MultiBrowserTest {
+
+    @Test
+    public void ensurePopupInView() {
+        openTestURL();
+
+        ComboBoxElement cb = $(ComboBoxElement.class).first();
+        cb.openPopup();
+        WebElement popup = cb.getSuggestionPopup();
+
+        int cbRight = cb.getLocation().getX() + cb.getSize().getWidth();
+        int popupRight = popup.getLocation().getX()
+                + popup.getSize().getWidth();
+        assertGreaterOrEqual(String.format(
+                "Popup should not reach further right than the ComboBox at the "
+                        + "right edge of the viewport. ComboBox: %s, Popup: %s",
+                cbRight, popupRight), cbRight, popupRight);
+    }
+}