How to open the dropdown of Ember Power Select from outside?

Question

As the title says, we would like to open the dropdown of the Ember Power Select (http://www.ember-power-select.com/) from outside, i.e., from a parent component or the route's template.

As far as we have checked, there is no way to trigger the action open of the component, which btw wouldn't be correct in the sense of "data down, actions up" principle. So, rather we need to "register" some data attribute that allows us to trigger to open the dropdown by altering the data attribute.

But maybe we have overseen something and somebody could propose a solution to our requirement to open the dropdown from outside?

Example: Ember Power Select is part of a bigger component, e.g., some bigger div. When the user clicks wherever on that div, the dropdown opens.

Thanks for any input!

Answer 1

You just need to set initiallyOpened attribute to true.

Besides, if you want to open power select by using jquery. You can call ember-power-select in your template and You can use these functions in your component.js:

function touchToEmberPowerSelect(identifier) {
  Ember.run(() => this.$('.' + identifier).get(0).dispatchEvent(new 
  MouseEvent('mousedown')));
}

And just for information, the code below can be used for selecting power select options in code after the dropdown is opened:

function createMouseEvent(){

let mouseevent = document.createEvent('MouseEvents');

mouseevent.initMouseEvent(
'mouseup',
true,
false,
window,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null);
return mouseevent;
}

function selectOptionWithDisplayTextOfEmberPowerSelect(identifier, displayText) 
{

  let matchedElements = $(".ember-power-select-option").filter(function() {
    return ($(this).text().trim() === displayText);
  });

  if(matchedElements.length < 1){
    Ember.assert("There is no element with display text");
  }
  else if(matchedElements.length > 1){
    Ember.assert("There are more than one elements with display text");
  }

  Ember.run(() => matchedElements[0].dispatchEvent(createMouseEvent()));
}