Unable to render a trigger component instead of the default one in new release of ember-power-select.

Upgrading our apps from Ember v.3.16 to v.3.20, but I’m not able to use my trigger instead of the default one in the ember-power-select(-multiple).

    "ember-cli": "3.20.2",
    "ember-cli-babel": "7.21.0",
    "ember-basic-dropdown": "3.0.12",
    "ember-power-select": "4.1.2",
    "ember-concurrency": "1.0.0",
    "ember-concurrency-decorators": "2.0.3",

FYI: there was no issue with overriding triggers in ember v.3.16 since we used ember-power-select v3.0.6

Since there was a bug in ember-basic-dropdown “TypeError: Cannot read property 'appendChild' of null at BasicDropdown.animateOut” (this issue has been solved in the library release of v.3.0.0-beta.9.) and Ember-power-select point to that release in its release of v.4.0.0, it’s needed to upgrade to Ember-power-select new release which is also compatible with ember v.3.20 (v.4.0.5 and upper)

Since Ember-power-select started using TypeScript from release of 4.0.0 and changed its component structure to using JS and HBS files in the same directory from version 4.0.5, I think there is a conflict with Ember components structure!

I’ve also tried using “triggerComponent” api for rendering our component instead of the default one inside the trigger, but it didn’t work.

I’ll be thankful if you help me for addressing this issue.

[bobisjan]

👋, @kaspiZonky and I faced with similar issue today - our component extending add-on’s trigger was ignoring custom template. Since the add-on’s components are co-located now, we were able to fix the issue by co-locating our component as well.

BAD ⛔️ (using pods, but assuming the same applies for classic)

// app/components/ui/dropdown/trigger/component.js
import Trigger from 'ember-power-select/components/power-select/trigger';
export default class UiDropdownTriggerComponent extends Trigger {}

{{!-- app/components/ui/dropdown/trigger/template.hbs --}}
<div>...</div>

GOOD ✅

// app/components/ui/dropdown/trigger/index.js
import Trigger from 'ember-power-select/components/power-select/trigger';
export default class UiDropdownTriggerComponent extends Trigger {}

{{!-- app/components/ui/dropdown/trigger/index.hbs --}}
<div>...</div>

Hope this helps 🤞

[betocantu93]

@bmaehr I prefer doing wrappers (composition) instead of extending or overriding, it tends to be easier to maintain specially templates… like so: https://github.com/prysmex/ember-eui/blob/master/packages/core/addon/components/eui-combo-box/index.hbs