CODEWITHSUNDEEP
javascripttemplatestom-selectsymfonyux
Rehark
Rehark

Reputation: 41

Add remove button on custom template Tom-Select

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

Upvotes: 0

Views: 1146

Answers (2)

Rehark
Rehark

Reputation: 41

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 ...
// }

Upvotes: 0

alimuratumutlu
alimuratumutlu

Reputation: 199

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"];

Upvotes: 0

Related Questions