If we successfully define a select-kit component within a plugin we are easily able to use it within a *.hbs template file using its pluginApiIdentifiers however, in order to attach that component within a widget using JS code I am not able to make it work. For instance:
I have:
import DropdownSelectBoxComponent from 'select-kit/components/dropdown-select-box';
export default DropdownSelectBoxComponent.extend({
pluginApiIdentifiers: ['header-profile-dropdown'],
...
autoHighlight() { ... },
computeContent() {
...
return items;
},
mutateValue(id) { ... }
});
Then I can go to any template I want to overwrite and write like:
(taking as an example the discovery template)
...
<div id="list-area">
{{header-profile-dropdown}}
...
And the snippet above will work flawlessly, BUT how I will include that component into a widget like:
api.reopenWidget('user-dropdown', {
html(attrs, state) {
if (this.site.mobileView) {
return h('div.profile-dropdown-container', [
this.attach('header-notifications', attrs),
--> I NEED ATTACH THE COMPONENT HERE <--
]);
}
...
}
});
NOTE: much of the code has been skipped to keep the post brief. Feel free to ask for the full code if needed.
PD: I have already tried to describe this issue at How to attach a component to a widget with just markup? but looks like it was a too complicated explanation so I am trying to reduce the information here to make it clear and try to find an answer.
