When using the Autocomplete component in a form as part of a LiveComponent, the field is not reset when re-rendering the component (E.G when submitting the form). The previous selected values are still selected.

Here is an example using a multi-select dropdown, with a custom query builder that removes the selected items from the list:

When changing the form to an Autocomplete type, and selecting items, it doesn't get removed from the select

Currently in order to reset the autocomplete dropdown, I'm emitting a custom browser event with a custom controller on the select with the following which seems to work fine:

import { Controller } from '@hotwired/stimulus'; import TomSelect from 'tom-select'; import { TomInput, TomSettings } from 'tom-select/dist/types/types'; /* stimulusFetch: 'lazy' */ export default class extends Controller { connect(): void { document.addEventListener('select:clear', (): void => { if ((this.element as TomInput).tomselect) { const settings: TomSettings|undefined = (this.element as TomInput).tomselect?.settings; (this.element as TomInput).tomselect?.destroy(); new TomSelect(<TomInput>this.element, (settings as TomSettings)); } }); } }