0

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!

Patrick Hammer
  • 1,172
  • 14
  • 25

1 Answers1

0

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()));
}
Ahmet Emre Kilinc
  • 5,489
  • 12
  • 30
  • 42
  • 1
    Ahmet, thanks for the answer. Synthetical events like you propose work nicely in this case. In your answer, you mix however 2 approaches, the old one that works in IE (`document.createEvent`) and the newer one with `MouseEvent`). Maybe you can make this clearer in your example. Reference for other readers: https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Creating_and_triggering_events – Patrick Hammer Sep 29 '17 at 21:56
  • 1
    @PatrickHammer yes you are right. While I was searching for the solution in my project. I have found that the newer MouseEvent can be used for opening the trigger in this page https://github.com/cibernox/ember-power-select/issues/517 – Ahmet Emre Kilinc Sep 30 '17 at 13:34
  • @PatrickHammer Now I remember, document.createEvent works for triggering mouse events for selecting ember-power-select options. I will extend the answer accordingly. – Ahmet Emre Kilinc Sep 30 '17 at 13:36
  • 1
    great, thx for improving the answer! Please note that link I posted. `MouseEvent` is not supported in IE, thus in order to be compatible with IE `document.createEvent` needs to be used. – Patrick Hammer Sep 30 '17 at 17:24