Resetting the form clears the list of choices

[mscart]

I have a form with some filters that make an ajax request to display a table. When I want to reset the filters ( $("#filter-form").trigger("reset");) all the select elements created with choices.js are empty and I have nothing left to select. I have to refresh the page to repopulate the select forms. any ideea ?

[masiorama]

I'm experiencing the same issue... how can we handle this scenario?

[kumardeepakme]

Having the same issue. Is there a fix for this?

[Sogl]

The same issue when I clear form inputs. Still no fix?

[jamesperrin]

Ran into the same problem.

I got an idea from issue #1023.

My band-aid is to add an addEventListener() for the form reset. Then, use Choices setChoices() method to re-populate the select element from the variable pointing to the select element.

It still allows the form normal reset process to work.

document.addEventListener('DOMContentLoaded', function () {
	const choicejsOptions = {
		allowHTML: false,
		removeItemButton: true,
		searchEnabled: true,
		searchChoices: true,
		searchFields: ['label', 'value'],
		placeholder: true,
	};

	const selectList = new Choices('.js-choice__SelectListID', choicejsOptions);

	document.querySelector('form').addEventListener('reset', function () {
		console.log('reset');
		// console.log(selectList);

		selectList.setChoices(function () {
			return selectList.config.choices.map(({ value, label }) => ({
				value,
				label,
				selected: false,
			}));

		});
	});
});

[ceciiiron]

Even the documentation shows the bug. It removes all of the options when I click the reset button

[MatheusRich]

A work-around (snippet from a Stimulus controller):

const choices = new Choices(this.element, {
  allowHTML: false,
  removeItemButton: this.element.multiple,
});

const form = this.element.closest("form");
if (!form) return;

form.addEventListener("reset", () => {
  choices.destroy();
  choices.init();
});