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

Contrabass

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());
           //     }
           // });
       }
   
   }
   

Assizes

Thank you very much for this, helped me a lot! – Mamey

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.

Ferment

@BasilBourque hm I saw the method in the V13 release presentation, but I guess that must have been only for TextField at that point, hmm. Edited. – Ferment

is there a way to attach a listener to the clear button ? In my case i am populating a grid based on combo box selection. If i am clearing combo selection i want to clear the grid too. – Chuffy

@Chuffy you can achieve that by using a ValueChangeListener on the comboBox itself, not the clearButton directly – Ferment

Answer 3

This is not possible at the moment but discussed as feature. See the Github issue No way to disallow clearing selected value. You can leave a thumbs up on that issue to emphasize its importance. IMO this is a must-have feature that should be implemented from the beginning.

The roadmap says something about a "Dropdown menu" upcoming in Vaadin 11 in Q3. This could be interesting.

Finned

Answer 4

I am using shadow-dom traversal of the clear button component inside the vaadin-combo-box (in this case, id:my-combo), and set the display property. (javascript)

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

Muller