Menu closes prematurely when clicking trigger bottom edge

[mayatron]

trafficstars

This is a minor thing, but the select menu appears to open and immediately close (with a single click) when clicking the very bottom edge of the trigger. See example below.

[mbernwieser]

I could observe the same behavior, but not only when you click on the edge, but especially when you click on the select box after losing focus.

This only occurs since version 3.0.0. If I use version 2.3.5 this does not occur.

[cibernox]

@mbernwieser Interesting regression. Are you able to reproduce it in any of the examples in the docs? I ask because it would be easier to track with a reproduction

[mbernwieser]

@cibernox unfortunately not (or perhaps better so ;) ). I'll see if I find time to track the bug down in the next few days

[bitwolfe]

I ran into this issue as well. By my testing it seems to be related to the eventType changes to BasicDropdown or something. The search field being enabled also seems to prevent the issue from showing itself, and so naturally the multiple select is in worse shape due to it not having a search field at the top of the dropdown.

Haven't had the time to debug if events are fired multiple times or not. Also unfortunately unable to reproduce this in the docs.

Tested in Microsoft Edge Beta (Chromium).

Edit: I'm using a dropdown animation as well. Might have something to do with that also, because my dropdown overlaps the trigger during the animation.

[ybaldus]

@cibernox I think this happens because the rootEventType of the basic dropdown is "click" and the eventType for the trigger is "mousedown". If you click the very bottom edge of the trigger, the trigger will get the mousedown event and the content opens. Because we are on the very edge of the trigger and the content is open the content will actualy receive the mouseup event.

Therefore the click event fires on the most specific ancestor of both elements. In our case this would propably the body element, if the content is wormholed. The dropdown registers a click event outside of itself and closes again.

[cibernox]

@ybaldus interesting. In the latest beta I changed the default to be click, can you install 4.0.0-beta and check if the problem is fixed for you? It requires Ember 3.13 tho.

[ybaldus]

@cibernox With the newest beta the element which receives the mouseup event will be selected. You can probably only fix this issue if you only react on mousedown.

According to mdn the following happens:

If the button is pressed on one element and the pointer is moved outside the element before the button is released, the event is fired on the most specific ancestor element that contained both elements.

[praveendinesh6]

@cibernox In my case, I'm using power select with renderInPlace as true and it closes immediately after focus(Related issue). For design purpose, we have moved the search box over the trigger element and the power select looks like this.

Due to the 'rootEventType' being changed from mousedown to click, handleRootMouseDown method is called, in which the event target will be the whole ember-basic-dropdown which fails this check thereby closing the dropdown instantly. I hope this follows the behaviour mentioned in above comment.

Is there any specific reason for moving away from mousedown to click other than the one mentioned here?

[cibernox]

@praveendinesh6 that I think was a bug that is not fixed in master: https://github.com/cibernox/ember-basic-dropdown/blob/master/addon/components/basic-dropdown-content.ts#L105

Now the root event is also configurable and EPS does.

The reason is that while for selects mousedown is a better event (it's like native selects work), since ember-basic-dropdown is a generic component, I changed the default. But EPS should configure EBD to still use mousdowns, and if it doesn't then it's a bug.

Are you in 3.13+? If so, maybe you can try using the beta version to see if it fixes your problem.

[praveendinesh6]

@cibernox I have updated the component to v4.0.0-beta.6 and ember 3.13 and facing the same issue. It seems we are passing eventType as mousedown to Dropdown Trigger component here.

I hope passing the mousedown value as rootEventType to BasicDropdown component will fix the issue.

[praveendinesh6]

@cibernox Kindly check on this when you find time. I can raise a PR to fix this.