addable functionality

[jkburges]

I have been successful in getting the "add" link to show, as in the preload example, but I am not sure how to hook up an event listener when it's clicked. Is there are more complete example?

If I add an event listener as below, I can see that the multiselect-addable event is firing, I'm just not sure what to do with it

export default class extends Controller {
  connect() {
    document.addEventListener("multiselect-addable", (event) => {
      console.log("Multiselect addable event triggered", event);
    });
  }

  ...
}

compared to say multiselect-added; I was able to hook my controller up to that event like data-action="multiselect-added->my-controller#onAdded, but cannot get something similar to work for multiselect-addable.

[jkburges]

FWIW, I was able to get things to work how I wanted by changing addableEvent to:

 addableEvent(input) {
    const item = {
      text: this.searchTarget.value,
      value: this.searchTarget.value,
    };

    this.element.dispatchEvent(
      new CustomEvent("multiselect-addable", { detail: { item: item } })
    );
  }

then in my HTML:

 <div data-controller="multiselect" ... data-action="multiselect-addable->my-controller#onTagsAdded">
  ...
 </div>

and controller:

onTagsAdded(event) {
    // event.detail.item.text;
    // event.detail.item.value;
    ...
}

I wonder if there's a reason why it's a document event currently? That created problems for me because I have multiple of these multiselects on the same page.