Tom-Select не очищает входные данные при нажатии кнопки сброса

Я использую tom-select на моей форме django. На форме я также сделал кнопку сброса, чтобы очистить все поля ввода. Все значения ввода очищаются, когда я нажимаю на кнопку, кроме того, в котором используется tom-select.

form.py

class ItemInputForm(ModelForm):
    def __init__(self, *args, **kwargs):
        super(ItemInputForm, self).__init__(*args, **kwargs)
        self.helper = FormHelper(self)
        self.helper.layout = Layout(
            Row(
                ....
                Column('item', css_class = 'col-md-4'),
                css_class = 'row'
                ),
                ....
            Div(
                HTML('<button type="submit" class="btn btn-danger col-md-4 me-4"><i class="fa-solid fa-print"></i> Print</button>'),
                HTML('<button type="reset" class="btn btn-warning col-md-4"><i class="fa-solid fa-rotate-left"></i> Reset</button>'),
                css_class = 'text-center'
                ),
                ....

том-селект на template

$(document).ready(function()
    {
      var item_select = new TomSelect("#id_item",{
        create: false,
        placeholder: 'Search',
        valueField: 'value',
        searchField: 'text',
        maxItems: 1,
        closeAfterSelect: true,
        render: {
              option: function(data, escape) {
                  return '<div>' + '<span class="text">' + escape(data.text) + '</span>' + '<span class="value">' + escape(data.value) + '</span>' + '</div>';
            },
          item: function(data, escape) {
                  return '<div title="' + escape(data.value) + '">' + escape(data.text) + '</div>';
                },
          },
      });
      item_select.clear();

Когда я обновляю страницу, поле ввода очищается из-за item_select.clear(), но это не работает, если я хочу очистить его кнопкой сброса. Как очистить поле ввода tom-select с помощью кнопки сброса?

Я столкнулся с той же проблемой, и вот мое решение.

Я включаю tom-select для каждого элемента HTML, имеющего класс tom-select-enabled. Я использую класс tomselected для получения всех элементов формы с включенным tom-select при сбросе и вызываю метод tomselect.clear().

document.addEventListener('DOMContentLoaded', function() {
  // Select all elements having the class 'tom-select-enabled', and enable TomSelect for these elements.
  document
    .querySelectorAll(".tom-select-enabled")
    .forEach((tomSelectElement) => {
      console.log(`Enabling tom-select for #${tomSelectElement.id}`);
      var tomSelectItem = new TomSelect(tomSelectElement, {
        plugins: {
          clear_button: { title: "Vider" }
        },
        create: false,
        persist: false
      });
    });

  // Clear all TomSelect instances of forms on reset.
  document.querySelectorAll("form").forEach((formElement) => {
    formElement.addEventListener("reset", (event) => {
      event.target
        .querySelectorAll(".tomselected")
        .forEach((tomselectedElement) => {
          tomselectedElement.tomselect.clear();
        });
    });
  });
});

Насколько мне удалось выяснить, событие reset не запускается для элемента, когда TomSelect инстанцируется.

Другая проблема заключается в том, что метод clear() визуально опустошает поле tom-select, но если в исходном поле select есть selected="selected" <option>, то он устанавливает значение select в выбранный вариант по умолчанию.

Если подано два вопроса по теме:

Я нашел несколько советов по очистке моего кода в Как очистить существующие (динамически созданные) экземпляры Tom-Select #170.

Вернуться на верх