Vaadin 23.1.6 ComboBox自定义值后clear()方法失效求助

问题原因 #

这是Vaadin 23.1.x版本中ComboBox的已知bug：提交自定义值后，组件会将该值临时存入内部候选集，后续调用clear()时无法彻底重置组件的输入状态，导致视觉或功能上的清空失效。

临时解决方案 #

方案1：重置Filter并强制设置Value为null #

在clear()后额外重置过滤器和组件值，确保内部状态同步：

combo.addCustomValueSetListener { event ->
    add(Span(event.detail))
    event.source.apply {
        clear()
        value = null
        setFilter("")
    }
}

方案2：重新设置原始数据源 #

通过重新设置初始的items列表，清除组件临时添加的自定义值：

val originalItems = listOf<String>() // 替换为你的原始数据源
val combo = ComboBox<String>().apply {
    setItems(originalItems)
    isAllowCustomValue = true
}

combo.addCustomValueSetListener { event ->
    add(Span(event.detail))
    event.source.apply {
        clear()
        setItems(originalItems) // 重置为原始数据源，移除临时自定义值
    }
}

方案3：通过JavaScript强制清空输入框 #

利用Vaadin的executeJs方法直接操作DOM，绕过组件内部状态的问题：

combo.addCustomValueSetListener { event ->
    add(Span(event.detail))
    event.source.clear()
    // 强制清空输入框DOM元素
    event.source.executeJs("this.inputElement.value = '';")
}

注意事项 #

• 确保已为ComboBox设置isAllowCustomValue = true，否则自定义值功能不会生效（建议显式添加该配置）。
• 该bug已在Vaadin后续版本（如23.2+）中修复，若项目允许，升级框架版本是彻底解决问题的最优方案。

内容的提问来源于stack exchange，提问作者kebuu