Question

我需要一个没有此清除按钮的ComboBox。它使用户感到困惑。

我相信在Vaadin 8中可以使用setEmptySelectionAllowed(true);将其删除。
如何在vaadin 10中将其删除？ setAllowCustomValue(false)无济于事。

Java 8
Vaadin 10.0.2

Answer 1

我想最简单的方法是使用CSS，至少我是这样做的。

您想要做的是扩展VaadinComboBox Web组件的默认主题模块（请参阅https://github.com/vaadin/vaadin-themable-mixin/wiki/2.-Adding-Styles-to-Local-Scope），因此您可以使用以下方法：

首先，选择一个CSS类名称，例如my-combobox
接下来，创建一个HTML文件，其中将包含VaadinComboBox Web组件的默认主题模块的扩展名。给它起一个类似my-combobox-theme.html的名称，然后将其放入src/main/resources/META-INF/resources（是，它是resources的两倍）

将以下内容放入该HMTL文件：

<dom-module id="my-combobox-theme" theme-for="vaadin-combo-box">
    <template>
        <style>
            :host(.my-combobox) [part="clear-button"] {
                display:none !important
            }
        </style>
    </template>
</dom-module>

在第一行中，您声明以下CSS应该作为VaadinComboBox Web组件定义的任何样式的补充。

然后，唯一的CSS规则定义，只要有VaadinComboBox的CSS类为my-combobox，就不应显示Web组件的clear-button部分。

使用@HtmlImport("frontend://my-combobox-theme.html")将自定义模块导入视图。注意：您需要在要使用修改后的ComboBox的所有视图中添加此批注。有关替代方法，请参见第6点
现在您已经准备就绪。只要您想拥有一个ComboBox而没有删除按钮，只需使用comboBox.addClassName("my-combobox")

您可能想在多个地方使用ComboBox，所以一个好主意是创建自己的类。这为您提供了可重用的组件，并始终确保正确的HTML导入以实现自定义样式：

@HtmlImport("frontend://my-combobox-theme.html")
public class MyCombobox extends ComboBox {

    public MyCombobox() {
        addClassName("my-combobox");

        // Adding the following code registers a listener which
        // resets the old value in case the user clears the
        // combo box editor manually, e.g. by entering "".
        //
        // addValueChangeListener(listener -> {
        //     if(listener.getValue() == null) {
        //         setValue(listener.getOldValue());
        //     }
        // });
    }

}

Answer 2

目前尚不可能，但将作为功能进行讨论。请参阅Github问题No way to disallow clearing selected value。您可以竖起大拇指以强调其重要性。 IMO这是必须从一开始就实现的必备功能。

roadmap说了第三季度Vaadin 11中即将推出的“下拉菜单”。这可能很有趣。

Answer 3

自 Vaadin 14 起，您可以轻松隐藏/显示清除按钮，

comboBox.setClearButtonVisible(false);
API documentation

我知道您要购买Vaadin 10，但为了完整起见，我想在此添加。

Answer 4

我正在使用vaadin-combo-box（在本例中为id：my-combo）中的清除按钮组件的影子dom遍历，并设置了display属性。（javascript）

var clear_button = this.$.my_combo.shadowRoot.querySelector("#clearButton");
clear_button.style.display = "none";

如何在Vaadin Flow中禁用ComboBox中的清除按钮？

4 个答案: