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

【问题标题】：How to disable clear button in ComboBox in vaadin flow?如何在 vaadin 流程中禁用 ComboBox 中的清除按钮？
【发布时间】：2019-01-09 02:28:39
【问题描述】：

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

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

Java 8
瓦丁 10.0.2

【问题讨论】：

标签： vaadin vaadin10 vaadin-flow

【解决方案1】：

从 Vaadin 14 开始，您可以使用

轻松隐藏/显示清除按钮

comboBox.setClearButtonVisible(false);
API documentation

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

【讨论】：

@BasilBourque hm 我在V13 release presentation 中看到了该方法，但我想那时肯定只适用于TextField，嗯。已编辑。
有没有办法将监听器附加到清除按钮？在我的情况下，我正在填充基于组合框选择的网格。如果我要清除组合选择，我也想清除网格。
@ratish 您可以通过在组合框本身上使用 ValueChangeListener 来实现这一点，而不是直接使用 clearButton

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

我想最简单的方法是使用 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 规则定义，只要有一个具有 CSS 类 my-combobox 的 VaadinComboBox，则不应显示 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());
        //     }
        // });
    }

}

【讨论】：

非常感谢您，帮了我很多忙！

【解决方案4】：

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

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

【讨论】：