A MultiselectComboBox in a Dialog unexpectedly closes it on mobile devices

[jstueckrath]

I recently encountered a strange problem when using a MultiselectComboBox in a Dialog on mobile devices (only!). I am not sure whether this is a Dialog issue or a MultiselectComboBox issue (or a combination), but I did not find a Vaadin Standard Component that shows the same behavior. I attached an example that illustrates the problem:
multiselect-combo-box-dialog-issue.zip

When the dialog is open, the behavior is as follows:

• Variant 1
  1. Clicking on the combobox opens the drop-down menu.
  2. Clicking outside the combobox, but not outside the dialog closes the drop-down menu, but not the dialog.
• Variant 2
  1. Clicking on the combobox opens the drop-down menu.
  2. Clicking outside the dialog while the drop-down menu is open closes the dialog.
• Variant 3
  1. Clicking on the combobox opens the drop-down menu.
  2. Selecting an item shows that it was selected.
  3. Clicking outside the combobox closes the entire dialog, regardless of whether the click was outside or inside the dialog.

In the last case I would expect the dialog to close only if the click was outside of it. Note that the problem only occurs on mobile devices, but can be reproduced by using your favorite browsers mobile device simulation. If viewed by a desktop computer normally, variant 3 behaves the same as variant 1 and 2, i.e. selecting an item does not make a difference. I assume that there is come kind of problem with the handling of touch events that causes this.

I produced this issue with Vaadin 14.2.3 and MultiselectComboBox 2.5.0.

[gatanaso]

HI @jstueckrath and thanks for the detailed information. Yeah that sounds interesting, not quite sure why it's happening. I'll try to look into it more closely and will get back if I find anything.