Vaadin-Combo Box

Custom Value Entry in Vaadin-Combo Box

In Vaadin-Combo Box, custom values that are not listed in the list of possibilities can be entered into Combo Box.

Java Code

The below given Java code will show you to take custom value entry in Vaadin-Combo Box.

package com.vaadin.demo.component.combobox;

import com.vaadin.flow.component.combobox.ComboBox;
import com.vaadin.flow.component.html.Div;
import com.vaadin.flow.router.Route;

@Route("combo-box-custom-entry-1")
public class ComboBoxCustomEntry1 extends Div
 `	{
  		public ComboBoxCustomEntry1() 
			{
			
    			ComboBox<String> cB = new ComboBox<>("Cars");
    			cB.setAllowCustomValue(true);
    			add(cB);
    			cB.setItems("Audi", "Maruti", "Honda", "Opel");
       			cB.setHelperText("Select or type your car");
       			
 			 }
	}

Output
 

Allowing custom entry in Combo Box is useful when you need to provide the most commonly used alternatives while also allowing users to enter their own.

Placeholder in Vaadin-Combo Box

A placeholder is used to reserve space in a layout for material that will arrive soon. It can be paragraphs, headers, image headers, and images, allowing you to format the loaders to evaluate the material being loaded. It is also used to offer an inline text prompt for the field.

Java Code

The below given Java code will show you to set a placeholder in the Vaadin-Combo box.

package com.vaadin.demo.component.combobox;

import com.vaadin.flow.component.combobox.ComboBox;
import com.vaadin.flow.component.combobox.ComboBox.ItemFilter;
import com.vaadin.flow.component.html.Div;
import com.vaadin.flow.router.Route;
import com.vaadin.demo.domain.DataService;
import com.vaadin.demo.domain.Person;

@Route("combo-box-placeholder")
public class ComboBoxPlaceholder extends Div
 	{
		 public ComboBoxPlaceholder()
 				{
 				 
 				 ItemFilter<Person> filter = (person, filterString) -> (person.getProfession() + " " +person.getFirstName() + " " +  person.getLastName()).toLowerCase().indexOf(filterString.toLowerCase()) > -1;
 	 
    			 ComboBox<Person> cB = new ComboBox<>("Cars");
    			 cB.setPlaceholder("Select Cars");
    			 add(cB);
    			 cB.setItems(filter, DataService.getPeople());
    			 cB.setItemLabelGenerator(person -> person.getFirstName()+" "+person.getLastName());
    				 
 				 }

	}
	

Output

Auto Open in Vaadin-Combo Box

The overlay immediately opens when the field is focused with a mouse or touchpad or when the user types in the field. You can disable it so that the overlay only appears when the toggle button or the Up/Down arrow keys are pressed.

Java Code

The below given Java code will show you to able and disable auto-open in the Vaadin-Combo box.

package com.vaadin.demo.component.combobox;


import com.vaadin.flow.component.combobox.ComboBox;
import com.vaadin.flow.component.html.Div;
import com.vaadin.flow.router.Route;


@Route("combo-box-custom-entry-1")
public class ComboBoxCustomEntry1 extends Div
	 {
 		 public ComboBoxCustomEntry1() 
				{
				
				ComboBox<String> cB = new ComboBox<>("Cars");
				cB.setAllowCustomValue(true);
				cB.setAutoOpen(false);
				add(cB);
				cB.setItems("Audi", "Maruti", "Honda", "Opel");
				cB.setHelperText("Select or type your car");
                     	  	  
  				}
	}

Output

Width of Popup in Vaadin-Combo Box

The width of the popup is set to be the same as the width of the input field by default. When the default width is too narrow, the popup width can be overridden to any fixed width.

Java Code

The below given Java code will show you to set the width of Popup in the Vaadin-Combo box.

package com.vaadin.demo.component.combobox;

import com.vaadin.flow.component.combobox.ComboBox;
import com.vaadin.flow.component.html.Div;
import com.vaadin.flow.router.Route;

@Route("combo-box-custom-entry-1")

public class ComboBoxCustomEntry1 extends Div
	 {
 		 public ComboBoxCustomEntry1() 
			{
			
			ComboBox<String> cB = new ComboBox<>("Cars");
			cB.setAllowCustomValue(true);
			cB.getStyle().set("--vaadin-combo-box-overlay-width", "250px");
			add(cB);
			cB.setItems("Audi", "Maruti", "Honda", "Opel");
			cB.setHelperText("Select or type your car");
                	 
  			}
	}

Output 

Custom Filtering in Vaadin-Combo Box

Vaadin-Combo box components enable filtering by default, which means you may filter the values by typing into a textbox.

There are three modes of filtering available in Vaadin-Combo Box in order to control the enable/disable feature:

🔥 FilteringMode.CONTAINS:- It matches any item that includes the string specified in the component's text field.

🔥 FilteringMode.OFF:- It disables filtering and displays all things at all times.

🔥 FilteringMode.STARTSWIDTH:- Only items that begin with the given string are matched. In Vaadin, this is the default mode.

Java Code

The below given Java code will show you to use the custom filtering in the Vaadin-Combo box.

package com.vaadin.demo.component.combobox;


import com.vaadin.flow.component.combobox.ComboBox;
import com.vaadin.flow.component.html.Div;
import com.vaadin.flow.router.Route;


@Route("combo-box-custom-entry-1")
public class ComboBoxCustomEntry1 extends Div
 	{
 		 public ComboBoxCustomEntry1() 
			{
			
			ComboBox<String> cB = new ComboBox<>("Cars");
			cB.setAllowCustomValue(true);
			cB.getStyle().set("--vaadin-combo-box-overlay-width", "250px");
			add(cB);
			cB.setItems("Audi", "Maruti", "Honda", "Opel");
			cB.setHelperText("Select or type your car");
			cB.setFilteringMode(FilteringMode.CONTAINS);  
  				  
 			 }
	}

Output

AutoComplete Field in Vaadin-Combo Box

The Combo Box will filter out alternatives that do not match the user types. Once the proper value has been identified, the user can explore the list with the Up/Down arrow keys and set the value with the Enter key, thereby using the Combo Box as an autocomplete field.

Frequently Asked Questions

What is Vaadin?

Vaadin is an internet utility framework, open-source platform, and Java-based Google Web Toolkit (GWT). The Vaadin platform contains many web components, software starts, performance, accessibility, and tools for building great-looking Java apps faster.

How does one install a Vaadin component?

Vaadin components can be installed using either npm or Bower. Bower install vaadin/vaadin-button, for example, will install the vaadin-button component.

What is Context Menu in Vaadin?

Context Menu is a component in Vaadin Box that can be attached to any component to display a context menu. The menu appears when you right-click (by default) or left-click. A lengthy tap on a touch device brings up the context menu.

Conclusion

Congratulations on finishing the blog! We have discussed the Vaadin-Combo Box. We further looked at the custom value entry, placeholder, Auto open, popup width, and filtering in Vaadin-Combo Box.

We hope this blog increases your knowledge regarding the Vaadin-Combo Box. We recommend you to visit our articles on different topics of Vaadin, such as

• Vaadin-Environment Setup
• Vaadin-Confirm Dialog
• Vaadin-Grid
   

Please refer to our guided pathways on Code studio to learn more about DSA, Competitive Programming, JavaScript, System Design, etc. Enroll in our courses, and use the accessible sample exams and questions as a guide. For placement preparations, look at the interview experiences and interview package.

Please do upvote our blogs if you find them helpful and informative!

Happy learning!