Symfony UX中TomSelect在LiveComponent多步表单的异常问题求助

场景与初始问题 #

我用 Symfony LiveComponents 实现了一个多步表单，其中包含多个如下配置的 ChoiceType 表单字段：

->add('yesOrNo', ChoiceType::class, [
    'choices' => [
        'label.yes' => true,
        'label.no' => false,
    ],
    'placeholder' => 'label.choose',
    'label' => 'rnmn.label.yes_or_no',
    'label_translation_parameters' => ['default' => 'Yes or no?'],
    'translation_domain' => 'edesk',
    'autocomplete' => 'on',
    'constraints' => [
        new NotNull(['message' => new TranslatableMessage('form.error.select-option', ['default' => 'Please select an option.'])]),
    ],
])

我使用 Flowbite bundle 为下拉框自动应用样式，其底层基于 TomSelect。

初始问题：加载 LiveComponent 时 JavaScript 未重新加载，导致下拉框选择值后会自动消失。

临时修复后的新问题 #

我应用了相关补丁解决下拉框消失问题，代码如下：

import { Controller } from '@hotwired/stimulus';
import TomSelect from 'tom-select';
import { getComponent } from '@symfony/ux-live-component';

/* stimulusFetch: 'lazy' */
export default class extends Controller {
    async initialize() {
        this.component = await getComponent(this.element);
        window.addEventListener('select:clear', (event) => {
            var elements = this.element.querySelectorAll('.tomselected');

            elements.forEach(element => {
                if (element.tomselect) {
                    var settings = element.tomselect.settings;
                    element.tomselect.destroy();
                    new TomSelect(element, settings);
                }
            });
        });
    }
}

该补丁解决了下拉框消失的问题，值也能正常更新，但出现新问题：表单会自动提交，导致验证约束信息提前显示。

内容的提问来源于stack exchange，提问作者O'Niel