How to open and close Ember Power Select from outside

Question

I'm aware of this question, but is not complete. I want to open and close the dropdown from outside.

I can dispatch a mousedown event when click on my wrapper component, so ember-power-select trigger opens!. But then if I click again it doesn't close. More precisely, it closes and opens again rapidly.

My assumption is the component is listening blur event to get closed, and then the mousedown arrives again and open the trigger.

Has anyone managed to get this to work? or an alternative?? I'm quite lost :)

Thanks for the help!

wrapper-component.js 

  didInsertElement() {

    this._super(...arguments);
    this.element.addEventListener('mousedown', (event) => {
      event.stopPropagation();
      const eventedElement = this.element.querySelector('.ember-power-select-trigger');
      const mouseDownEvent = new MouseEvent('mousedown');
      eventedElement.dispatchEvent(mouseDownEvent);
    });

  },

Answer 1

According to the docs, the only way to interact with the trigger/component is through the read-only API provided in subcomponents, blocks, and actions of the ember-power-select component.

Since you can already open the trigger you can cache the API in an onchange event action defined in your component (or controller of the route) where you render the ember-power-select:

Where you render the component just provide an action to onopen:

{{#ember-power-select
  options=options
  selected=selectedOption
  onchange=(action "someAction")
  onopen=(action "cacheAPI")
  as |option|}}
  {{option}}
{{/ember-power-select}}

In your component or controller that renders it:

actions: {

  cacheAPI(options) {
    if (this.powerSelectAPI) return;

    this.set('powerSelectAPI', options);

    // if you just want the actions:
    // this.set('powerSelectAPI', options.actions);
  }

}

Then you can open/close the trigger through the API:

this.get('powerSelectAPI').actions.close();

Answer 2

RegisterAPI is solution. From the docs:

The function that will be called when the component is instantiated and also when any state changes inside the component, and receives a publicAPI object that the user can use to control the select from the outside using the actions in it.

@action
registerAPI(emberPowerSelect) {
  if (!this.emberPowerSelect) {
    this.emberPowerSelect = emberPowerSelect;
  }
}
    
@action
toggle(state) {
  if (state) {
    this.emberPowerSelect.actions.open();
  } else {
    this.emberPowerSelect.actions.close();
  }
}