When ComboBox popup opens to the left accommodate margin/border/padding. (#11755)

Fixes #11718

3 files changed, 73 insertions, 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
index 587710e612..81453bfade 100644
--- 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 class VComboBox extends Composite implements Field, KeyDownHandler,
 
             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 class VComboBox extends Composite implements Field, KeyDownHandler,
                             .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 class VComboBox extends Composite implements Field, KeyDownHandler,
                 }
             }
 
-            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
new file mode 100644
index 0000000000..a8a70f7a19
--- /dev/null
+++ b/uitest/src/main/java/com/vaadin/tests/components/combobox/ComboBoxAtRightEdge.java
@@ -0,0 +1,36 @@
+package com.vaadin.tests.components.combobox;
+
+import java.util.Arrays;
+
+import com.vaadin.server.VaadinRequest;
+import com.vaadin.tests.components.AbstractTestUI;
+import com.vaadin.ui.Alignment;
+import com.vaadin.ui.ComboBox;
+import com.vaadin.ui.VerticalLayout;
+
+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);
+        getLayout().setComponentAlignment(comboBox, Alignment.BOTTOM_RIGHT);
+
+        ((VerticalLayout) getLayout().getParent()).setMargin(false);
+    }
+
+    @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
new file mode 100644
index 0000000000..e65d4ed12b
--- /dev/null
+++ 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);
+    }
+}