ComboBox popup behaves badly when ComboBox is placed to right edge

[TatuLund]

Vaadin 8.8.6
Browser: Chrome 76, Edge, probably others too

Steps to replicate

• Create UI where ComboBox is placed on the right edge of the UI.

• Add items, which are wider than ComboBox itself.

• comboBox.setPopupWidth(null) (or 100% or something that is wider than ComboBox)

• Open the ComboBox

• Hover mouse to first item on popup (popup will shift slightly to right, pushing UI to the left)

• Hover mouse back to the text box (you will see that popup extends outside of the screen)

• Hover mouse back to the first item (popup will shift even more to the right, pushing UI to the left)

Originally reported in Forum (including video)

https://vaadin.com/forum/thread/17826265/combobox-popup-on-far-right-modifies-main-layout

[anasmi]

Code to reproduce:

 ComboBox<String> nameComboBox = new ComboBox<>("Long items");
 nameComboBox.setPopupWidth(null);
 nameComboBox.setItems(Arrays.asList("First Very long item to add",
                  "Second very long item to add", "Third very long item to add"));
                
addComponent(nameComboBox);
 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");
 nameComboBox.addStyleName("positionRight");