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

GoceRibeski · 2017-02-21T12:58:07Z

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.

The text was updated successfully, but these errors were encountered:

web-padawan · 2017-02-21T13:07:49Z

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.

GoceRibeski · 2017-02-21T18:12:33Z

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

Saulis · 2017-03-01T06:59:38Z

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>

kito99 · 2017-03-02T15:21:48Z

@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 · 2017-03-02T15:25:00Z

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

artem-vladimirov · 2017-03-17T17:53:19Z

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>

panuhorsmalahti · 2017-04-03T07:58:38Z

@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.

timoteoponce · 2017-05-10T14:22:17Z

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

jouni · 2017-05-10T18:54:27Z

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.

Saulis · 2017-05-10T20:25:20Z

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 · 2017-06-12T05:52:06Z

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

web-padawan · 2017-06-12T06:23:47Z

@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.

Saulis · 2017-06-12T06:33:59Z

@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 · 2017-06-12T07:06:30Z

@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)

arkihillel · 2017-06-12T09:29:03Z

@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

Saulis · 2017-06-12T12:37:34Z

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

jonagh · 2017-06-12T21:20:10Z

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 ;)

arkihillel · 2017-06-12T22:27:04Z

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

JuanCalderon · 2017-08-04T18:49:20Z

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.

jouni added the ⭐️ label May 10, 2017

yuriy-fix mentioned this issue Aug 15, 2017

_boundIronOverlayCanceledListener event listener vaadin/vaadin-overlay#14

Merged

yuriy-fix added in review and removed ⭐️ labels Aug 15, 2017

yuriy-fix closed this as completed Aug 17, 2017

yuriy-fix removed the in review label Aug 17, 2017

manolo added this to the 3.0.0-alpha3 milestone Sep 8, 2017

bramkragten mentioned this issue Sep 3, 2019

Click outside combo box closes paper-dialog #834

Closed

7 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

GoceRibeski commented Feb 21, 2017

web-padawan commented Feb 21, 2017

GoceRibeski commented Feb 21, 2017

Saulis commented Mar 1, 2017

kito99 commented Mar 2, 2017

kito99 commented Mar 2, 2017

artem-vladimirov commented Mar 17, 2017 •

edited

panuhorsmalahti commented Apr 3, 2017 •

edited

timoteoponce commented May 10, 2017

jouni commented May 10, 2017

Saulis commented May 10, 2017 •

edited

Saulis commented Jun 12, 2017

web-padawan commented Jun 12, 2017

Saulis commented Jun 12, 2017

Saulis commented Jun 12, 2017

arkihillel commented Jun 12, 2017

Saulis commented Jun 12, 2017

jonagh commented Jun 12, 2017

arkihillel commented Jun 12, 2017 •

edited

JuanCalderon commented Aug 4, 2017

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

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

Comments

GoceRibeski commented Feb 21, 2017

Description

Expected outcome

Actual outcome

Live Demo

Steps to reproduce

web-padawan commented Feb 21, 2017

GoceRibeski commented Feb 21, 2017

Saulis commented Mar 1, 2017

kito99 commented Mar 2, 2017

kito99 commented Mar 2, 2017

artem-vladimirov commented Mar 17, 2017 • edited

panuhorsmalahti commented Apr 3, 2017 • edited

timoteoponce commented May 10, 2017

jouni commented May 10, 2017

Saulis commented May 10, 2017 • edited

Saulis commented Jun 12, 2017

web-padawan commented Jun 12, 2017

Saulis commented Jun 12, 2017

Saulis commented Jun 12, 2017

arkihillel commented Jun 12, 2017

Saulis commented Jun 12, 2017

jonagh commented Jun 12, 2017

arkihillel commented Jun 12, 2017 • edited

JuanCalderon commented Aug 4, 2017

artem-vladimirov commented Mar 17, 2017 •

edited

panuhorsmalahti commented Apr 3, 2017 •

edited

Saulis commented May 10, 2017 •

edited

arkihillel commented Jun 12, 2017 •

edited