Register custom event in ember-power-select( onmouseEnter, OnMouseLeave)

Question

How may I register my custom event(onmouseEnter, OnMouseLeave) in Ember-power-select. By default it supports only: onblur, onchange, onclose, onfocus, oninput, onkeydown, onopen, scrollTo.

Answer 1

My answer is more general and applies to how you would go about add functionality to an existing addon. In ember, all addons (more specifically what's defined in the /app dir of the addon) are merged into the app directory of the consuming application automatically. This has the net effect of registering component factories to the dependency injection containers registry.

If you have a component with the exact same name as the addon, yours will win (ie overwrite the registry entry for component:your-component.

So, in the classic non pods layout of an ember app, you could define your-app/components/power-select as such:

import PowerSelect from 'ember-power-select/components/power-select';

export default PowerSelect.extend({
    init(){
        this._super(...arguments);
        // do custom stuff
    },
    onMouseEnter(_, event){
        // I've taken this code from how `power-select` already handles events
        let action = this.get('onMouseEnter');
        if (action) {
            action(this.get('publicAPI'), event);
        }
    }
})

you would end up with a custom power-select version for your app. Now, what you want to do with power-select specifically is more complicated since you're wanting to handle events from within power-select that power-select isn't currently delegating to its subcomponents.

{{#dropdown.trigger
    // You add this line
    onMouseEnter=(action "onMouseEnter")
    role=(readonly triggerRole)
    tagName=(readonly _triggerTagName)
    ...
    tabindex=(readonly tabindex)}}

This works because the ember-basic-dropdown already has built in support for this action. There's the definite drawback of not being able to upgrade without manually managing this component's upgrade, but it certainly lets you get the job done quick. If you opt for this approach, I would highly recommend trying to create PR and get this merged upstream.