vaadin-combo-box when placed inside paper-dialog is closing the dialog in some cases.

Created on 21 Feb 2017 · 19Comments · Source: vaadin/vaadin-combo-box

Description

When vaadin-combo-box element is placed inside paper-dialog, if user opens the box for selection(but does not select, just leaves it opened ) then click anywhere in the dialog closes the dialog.

Expected outcome

Click anywhere in the dialog( pr. top left corner) should close the box, but leave the dialog opened.

Actual outcome

Click anywhere in the dialog closes the whole dialog.

Live Demo

https://jsfiddle.net/ribe/02tntfn3/2/

Steps to reproduce

Open the dialog,
open the box, and do not select - leave it opened,
3.Click on the top left corner of the dialog.

Source

GoceRibeski

Most helpful comment

FYI, this also happens if you just select an item in the combo box using your mouse...

kito99 on 2 Mar 2017

👍7

All 19 comments

There is a kind of bug with events propagation. E. g. closing vaadin-combo-box by pressing Esc also closes dialog. In such cases I usually use something like on-keydown="_stopPropagation" and then just add handler like this:

_stopPropafation: function (e) {
  e.stopPropagation()
}

There's also a stopKeyboardEventPropagation property supplied by IronA11yKeysBehavior , but that behavior is not implemented by vaadin-combo-box and that property seems not to work for some other elements, looks like it handles events too late.

web-padawan on 21 Feb 2017

I can't find where to place the event that will call stopPropagation in given Fiddle. Any idea?

GoceRibeski on 21 Feb 2017

Hi there!

The challenge here is that the overlay of <vaadin-combo-box> is placed under <body>, which is outside of the <paper-dialog> so it considers any clicks on the combo-box's overlay as "outside clicks", which by default close the dialog.

As a workaround, you can disable the outside clicks when the combo-box is open:

...
<vaadin-combo-box id="third" label="Focus Third" tabindex="3" on-focus="_focusInput" items="[[items]]" on-blur="_onBlur" on-opened-changed="_onComboBoxOpened">
        </vaadin-combo-box>

<script>
...
_onComboBoxOpened: function(e) {
  if (e.detail.value) {
    this.$.add_row_details_dialog.noCancelOnOutsideClick = true;
  } else {
    this.async(function() {
      this.$.add_row_details_dialog.noCancelOnOutsideClick = false;
    }, 10);
  }
}
...
</script>

Saulis on 1 Mar 2017

@Saulis, your approach didn't work for me, unfortunately. However, I just set the noCancelOnOutsideClick property to true on the paper-dialog, and that fixes the problem (there was no requirement to close the dialog when you click outside of it, in this case).

kito99 on 2 Mar 2017

👍1

FYI, this also happens if you just select an item in the combo box using your mouse...

kito99 on 2 Mar 2017

👍7

Apply 'no-cancel-on-outside-click' to paper-dialog element. This will prevent dialog from closing when you selected element in the vaadin-combo-box by mouseclick or from keyboard.

<paper-dialog no-cancel-on-outside-click> <vaadin-combo-box class="elements-box" items="[[arrayOfValues]]"></vaadin-combo-box> </paper-dialog>

artem-vladimirov on 17 Mar 2017

👍1

@kito99 / @artem-vladimirov's workaround with no-cancel-on-outside-click is not suitable in general or for me, since I want the user to be able to close the dialog with an outside click. (But I can confirm that it works if that is not a requirement).

Another (similar) workaround is to listen for the iron-overlay-canceled event and then call event.stopPropagation() and event.preventDefault(), but this has the same problem as the other workaround - it prevents closing the dialog on a background click.

I've tried to differentiate the two events from each other but no luck so far.

I can confirm @kito99's observation that just selecting an item closes the dialog, and so does canceling the selection by clicking on the paper-dialog.

EDIT:

I came up with the following workaround:

        listeners: {
          "iron-overlay-canceled": "onCanceled",
        },
        onCanceled(event) {
            const paperDialogHoverElement = document.querySelector("paper-dialog:hover");
            const vaadinHoverElement = document.querySelector("vaadin-combo-box-overlay:hover");
            if (paperDialogHoverElement || vaadinHoverElement) {
                event.stopPropagation();
                event.preventDefault();
            }
        }

In short, the event is canceled only if the cursor is on the paper-dialog or on the overlay element. With this workaround I can select dropdown values, close the dialog with an outside click and also close the dialog with the escape button. Tested on Chrome and Firefox.

panuhorsmalahti on 3 Apr 2017

Is there something to do here besides to wait a new version? official vaadin workaround?

timoteoponce on 10 May 2017

Not sure why I’ve completely missed this issue for so long. This is a really fundamental usability problem and should be fixed asap. I’ll see if I can inspire @Saulis or someone else from the dev team to take a look this or next week.

jouni on 10 May 2017

👍1

Hey guys, please try out the branch iron-overlay-cancel (unfortunately that's built on top of current master so there might be some dependency conflicts with it being hybrid – resolve deps to 2.0-preview, and Polymer to whichever you want)

I also cherry-picked the change on top of the 1.x branch (iron-overlay-cancel-v1) but can't currently verify it working myself as I don't want to mess up my Polymer 2 bower setup :-)

Update: this fix probably works only on iron-overlay-behavior v1.10.3 or later.

Saulis on 10 May 2017

@GoceRibeski @web-padawan @kito99 @artem-vladimirov @panuhorsmalahti @timoteoponce anybody have a chance to try the fix out? Thanks!

Saulis on 12 Jun 2017

@Saulis Thanks for reminding. I just grabbed the iron-overlay-cancel-v1 branch and I see the warning:

[vaadin-combo-box::_createEventHandler]: listener method `_onBlur` not defined

So, after having both paper-dialog and inner vaadin-combo-box opened, I tried two things:

When pressing Esc key, dialog gets closed while combo-box overlay stays opened,
When selecting item, both dialog and combo box get closed.

I have not much time to investigate right now, but guess that missing listener might be the reason.

web-padawan on 12 Jun 2017

@web-padawan thanks! no need to worry about the missing _onBlur, its a listener that is intentionally removed, but the accidentally left the listener binding in place. I need to re-test those issues you reported, I haven't tested the v1 branch myself.

Saulis on 12 Jun 2017

@web-padawan I can confirm that the fix does work for me both on iron-overlay-cancel with Polymer 2.x and iron-overlay-cancel-v1 Polymer 1.9.1 – please double-check that you have iron-overlay-behavior v1.10.3 or later installed (I'm running 2.0.0)

Saulis on 12 Jun 2017

@Saulis It doesn't work for me. In fact I even have a weird bug that is not present on 2.0a4. All the text from my template disappears

I'm running Polymer 2 with iron-overlay-behavior#2.0.0

Here is 2.0.0-alpha4: http://www.giphy.com/gifs/3ohzdQKeVtoswDSpfW
Here is the iron-overlay-cancel branch: http://www.giphy.com/gifs/3o7btZ3T0yMwKkG6fm

arkihillel on 12 Jun 2017

@arkihillel I've rebased iron-overlay-cancel on top of master, can you try again? And make sure you reinstall all bower deps.

Saulis on 12 Jun 2017

Seems to work for me.
Using: vaadin-combo-box#iron-overlay-cancel, polymer#2.0.1, iron-overlay-behavior#2.0.0

Btw, not a big deal, but you may have made a typo with _removeOutsideTabListener, ie Tab vs Tap ;)

jonagh on 12 Jun 2017

@Saulis Works now!
Sorry for the edit, thought I discovered a weird bug but it was a mistake of mine

arkihillel on 13 Jun 2017

👍1

Is there already a stable solution ?
When an Item is selected using the mouse, the event (selectedItemChange) is triggered two times; the first with the new selected Item and the second with the previous (impossible change the selection).
Thanks.