Ember-power-select: Trigger dropdown from js

Created on 27 May 2016 · 3Comments · Source: cibernox/ember-power-select

Hello.

Great component, however, quite rigid.
How can I trigger dropdown from js?
I have custom placeholder with z-index > than trigger and I want to trigger dropdown openning by invoking the action. I haven't found any native thing like "dropdownOpened" which might simplify many things.

This isn't working btw:

  triggerDropdown() {
      run(this, function() {
        this.$('.ember-basic-dropdown-trigger').mousedown();
      });
    },

Source

Blackening999

Most helpful comment

Yes, that is a simper solution. For the record, the problem with your code above is that you are using jQuery. jQuery event's are very bad citizens and do not trigger native event handlers (those added with element.addEventListener('mousedown', fn).

The native event works.

 triggerDropdown() {
      run(this, function() {
        $('.ember-basic-dropdown-trigger').get(0).dispatchEvent(new MouseEvent('mousedown')); 
      });
    },

cibernox on 27 May 2016

👍4

All 3 comments

pointer-events: none;
fixes the thing :)

Blackening999 on 27 May 2016

The native event works.

 triggerDropdown() {
      run(this, function() {
        $('.ember-basic-dropdown-trigger').get(0).dispatchEvent(new MouseEvent('mousedown')); 
      });
    },

cibernox on 27 May 2016

👍4

@cibernox is this still the recommended way to trigger the opening of a power-select from an external ember action (eg in reaction to clicking a button)? I realize that use case doesn't fit super cleanly into ember's DDAU paradigm (without forcing code using the component to reflect all it's internal state changes), but resorting to triggering a synthetic DOM event seems a bit...messy