如何在 vaadin 流程中禁用 ComboBox 中的清除按钮？

Question

我需要一个没有这个清除按钮的组合框。它让用户感到困惑。

我相信在 Vaadin 8 中它可以用 setEmptySelectionAllowed(true); 删除。
如何在 vaadin 10 中将其删除？ setAllowCustomValue(false) 没有帮助。

Java 8
Vaadin 10.0.2

Answer 1

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

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

首先，选择一个 CSS class 名称，例如 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 网络组件定义的任何样式。

然后，那里唯一的 CSS 规则定义了只要有一个 VaadinComboBox 具有 CSS class my-combobox clear-button 部分Web 组件不应显示。

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

您可能想在多个地方使用您的 ComboBox，因此一个好主意是创建您自己的 class。这为您提供了一个可重用的组件，并负责始终为自定义样式导入正确的 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 说明了有关 "Dropdown menu" 即将在第三季度的 Vaadin 11 中推出的内容。这可能很有趣。

Answer 3

我正在使用影子-dom遍历vaadin-combo-box（在本例中为id:my-combo）内的清除按钮组件，并设置显示属性. (javascript)

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

Answer 4

从 Vaadin 14 开始，您可以使用

轻松 hide/show 清除按钮

comboBox.setClearButtonVisible(false);
API documentation

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

如何在 vaadin 流程中禁用 ComboBox 中的清除按钮？

How to disable clear button in ComboBox in vaadin flow?

vaadin

vaadin10

vaadin-flow