Custom Icon ComboBox in Vue

Background:

In some use cases, developers may want to customize the appearance of a ComboBox by adding an SVG icon not only to each dropdown item, but also in front of the currently selected text within the input area. While Wijmo does not offer a built-in method for adding icons to the input element itself, this can be accomplished with a small amount of DOM manipulation.

Steps to Complete:

1. Add logic to the selectedIndexChanged event
2. Inject the SVG icon into the input area using JavaScript
3. Apply custom styling if needed

Getting Started:

Add logic to the selectedIndexChanged event

To detect when the selected item changes and apply your icon logic, add a listener or handler to the selectedIndexChanged event.

const inputGroup = document.querySelector('.wj-input-group'); 
if (inputGroup) {
  if (!inputGroup.querySelector('.input-icon')) {
    const iconSpan = document.createElement('span');
    iconSpan.className = 'input-icon';
    iconSpan.innerHTML = this.icon1;

    // insert icon
    inputGroup.insertBefore(iconSpan, inputGroup.firstChild);
  }
}

Inject the SVG icon into the input element

In this approach, we query the DOM for the .wj-input-group container that wraps the input field. If an icon does not already exist, we create a span element, assign it a class, and set its inner HTML to the SVG markup stored in this.icon1. This span is then inserted as the first child of the input group.

Apply styling as needed

You may want to add CSS to properly align the SVG icon inside the input group. This depends on your theme and layout, but a sample project with updated styling is available below.

You can also find a live sample of this project here.

This method is currently the most straightforward and effective way to achieve the desired UI customization.

Hope you found this helpful. Happy coding!