0

I have some problems with the Tom-Select template. When I use the default template, I can delete an item with the Delete button. But when I've defined mine, I can't delete anything.

I've my tomSelect element stored in tomSelect and the "DOM" change are applied, but I ve no cross to delete this.

<select id="service-filter" name="service-filter" class="form-control" placeholder={{ 'forms.placeholder.service'|trans }} multiple="multiple" {{ stimulus_controller('symfony/ux-autocomplete/autocomplete', { url: path('get_services_and_customers', {}), }) }} ></select>

` _onConnect(event) {

const options = event.detail.options || {}; // Add default value for options
const tomSelect = event.detail.tomSelect;

tomSelect.settings.plugins = ["remove_button"];

tomSelect.settings.render = {
    option: function(data, escape) {
        return '<div>' + '<span class="title">' + escape(data.text) + '</span>' + '</div>';
    },
    item: function(data, escape) {
        return '<div>' +  '<span class="title">' + escape(data.text) + '</span>' + '<a href="javascript:void(0)" class="remove" tabindex="-1" title="">×</a>' + '</div>';
    }
}

}

`

What I did wrong

I just want to define my custom template and continue using Tom-Select's 'remove_button' plugin

Rehark
  • 1
  • 3

2 Answers2

0

You haven't enabled the remove_button plugin. The remove_button plugin is responsible for adding the cross to the selected items, which allows the user to delete them.

To enable the remove_button plugin, you need to set the plugins option in the tomSelect object to an array that includes the string remove_button:

tomSelect.settings.plugins = ["remove_button"];
alimuratumutlu
  • 101
  • 5
  • there is no need, when my code is `_onConnect(event) { const options = event.detail.options || {}; // Add default value for options const tomSelect = event.detail.tomSelect; }` I ve the "remove button", it's only when i create a custome template – Rehark Apr 17 '23 at 13:11
  • What about adding the optgroup and optgroupHeader options to your custom template.? These options are used to group the selected items and provide a header for each group. When these options are not set, the remove_button plugin may not work correctly. – alimuratumutlu Apr 17 '23 at 13:17
  • after many try, i found this on the doc : `https://tom-select.js.org/docs/#render-templates`, copy all of them and not not edit them to have the default templating systeme, but still not working, i have no "remove_button" on my template – Rehark Apr 17 '23 at 13:43
0

I ve found a temporary solution to concerve the remove button for now, but not the best one, because i need to modify my item template to...

tomSelect.settings.render["option"] = function(data, escape) {
    # code ...
}

it save the default item template so the remove button still exist

// tomSelect.settings.render["item"] = function(data, escape) {
    // # code ...
// }
ruud
  • 743
  • 13
  • 22
Rehark
  • 1
  • 3