How to disable clear button in ComboBox in vaadin flow?

Question

I need a ComboBox without this clear button. It confuses the users.

I believe in Vaadin 8 it could be removed with setEmptySelectionAllowed(true);.
How can it be removed in vaadin 10? setAllowCustomValue(false) does not help.

Java 8
Vaadin 10.0.2

Answer 1

I guess the easiest way to achieve that would be with CSS, at least that's how I would do it.

What you want to do is extend the default theme module for VaadinComboBox web component (see https://github.com/vaadin/vaadin-themable-mixin/wiki/2.-Adding-Styles-to-Local-Scope), so you can use the following approach:

1. First, choose a CSS class name, like my-combobox
2. Next, create an HTML file that will contain the extension of the default theme module for VaadinComboBox web component. Give it a name like my-combobox-theme.html and put it into src/main/resources/META-INF/resources (yes, it's resources twice)

3. Put the following into that HMTL file:

   <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>
   

In the first line you declare that the following CSS is supposed to supplement whatever styles are defined for VaadinComboBox web component.

Then, the only CSS rule that is there defines that whenever there is a VaadinComboBox that has CSS class my-combobox the clear-button part of the web component should not be displayed.

4. Import the custom module to a view with @HtmlImport("frontend://my-combobox-theme.html"). NB: you need to add this annotation in all views that you want to use the modified ComboBox in. See point 6 for an alternative

5. Now you're pretty much all set. Whenever you want to have a ComboBox without delete button, just add a class name with comboBox.addClassName("my-combobox")

6. You probably want to use your ComboBox in more than one place, so a good idea is to create your own class. This gives you a reusable component and takes care of always having the right HTML import for custom style in place:

   @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

Since Vaadin 14 you can easily hide/show the clear button with

comboBox.setClearButtonVisible(false);
API documentation

I know you asked for Vaadin 10, but for completeness I wanted to add this here.