Tom Select Multiple Select Click Event

Question

Tom Select has a nice feature when using the multiple options select, that you can select and highlight an option. This is used for deleting options, but I'd like to hook in to the event to make some additional user options available. (Display more info on option chosen etc)

The Tom Select API has a load of events but none of them include this click feature. I've tried adding an event listener to the item, but for some reason can't get it working.

Best I have found is the onFocus which kind of works, except you can't move between options, you have to click off the input and refocus on the input with a new item. Fiddle below shows this behaviour.

var settings = {
 onFocus: function(){ console.log("clicked")}
  };
  document.querySelectorAll('.testSelect').forEach((el)=>{
     new TomSelect(el,settings);
});

https://jsfiddle.net/4o5L02fm/2/

Does anyone know of anyway to get this event trigger?

Thanks in advance.

Answer 1

Ok, well I don't know if there is a better way, but I took one of the examples and had a punt that you could override the render function of the item.

  var settings = {
    render:{
        item: function(data) {
          const div = document.createElement('div')

          div.innerText = data.text;
          div.className = "item"
          div.addEventListener('click', function() {console.log("yay")}, false)
          return div
        }
    }
  }

https://jsfiddle.net/jopfd7b4/

Hopefully someone else may find this useful.