How to add search icon in Vaadin ComboBox?

Question

I have a ComboBox that allows selection of the given items, and an icon that accepts the selection:

the functionality is all fine.

I'm looking for the effect to get the search icon into the comboBox. like in Vaadin Icons:

How is this done?

I tried

comboBox.setIcon(new ThemeResource("search.png"));

it didn't do any change.

backend developer here - not good on front-end tools.

//==========================================

EDIT:

one thing i can think of is to make the border of ComboBox disappear (don't know yet how), and make a border on the component that contains both the icon and the comboBox. is there another/better way?

Stockton

Which theme are you using? Valo? – Intensifier

it's the one Vaadin created when i was creating the project. didn't temper any with the themes. – Stockton

Answer 1

Actually, looking at that page's source, and I could be wrong but, it does not seem to be a standard Vaadin combo-box

An alternative workaround based on your discussion with @defaultlocale, could be grouping a button with the combo like this

or this:

Anyway, you can tweak the code below to your liking and you can also check out the sources of the sampler for more examples.

public class ComboWithIcon extends CssLayout {
    public ComboWithIcon() {
        // basic item configuration
        ComboBox comboBox = new ComboBox();
        
        Button searchButton = new Button();
        searchButton.setIcon(VaadinIcons.SEARCH);
        searchButton.addStyleName(ValoTheme.BUTTON_FRIENDLY); // remove this to have a regular button
        searchButton.addClickListener(event -> {/* add button listener here */ });

        // add components to the layout - switch these to have the button to the left of the combo
        addComponent(comboBox);
        addComponent(searchButton);

        // set group style
        addStyleName(ValoTheme.LAYOUT_COMPONENT_GROUP);
    }
}

---

Later edit

Based on the above and your later edit, you can also remove their borders, group them within a layout and add the layout to a panel for the overall border effect (there is probably a more elegant solution to get the border, but I haven't found any default styles and I don't have more time to investigate, so suggestions are welcome):

public class ComboWithIcon extends Panel {
    public ComboWithIcon() {
        // basic item configuration
        ComboBox comboBox = new ComboBox();
        comboBox.addStyleName(ValoTheme.COMBOBOX_BORDERLESS);

        Button searchButton = new Button();
        searchButton.setIcon(VaadinIcons.SEARCH);
        searchButton.addStyleName(ValoTheme.BUTTON_BORDERLESS_COLORED);
        searchButton.addStyleName("no-focus"); // remove the annoying focus effect
        searchButton.addClickListener(event -> {/* add button listener here */ });

        // add components to the layout - switch these to have the button to the left of the combo
        CssLayout layout = new CssLayout(searchButton, comboBox);
        // set group style
        layout.addStyleName(ValoTheme.LAYOUT_COMPONENT_GROUP);

        setContent(layout);
        setWidthUndefined(); // fit the component widths instead of expanding by default
    }
}

with a minor theme tweak to avoid the focus style on the button

.v-button-no-focus:after {
  content: none;
}

and get:

Erenow

Now, that's an excellent answer! I wish I could upvote this twice. – Euchre

@defaultlocale thanks for the vote of confidence :-). It's not perfect either with all its quirks, but at least it's a starting point – Erenow

Answer 2

Probably you can take the css from Vaadin Icons page and adjust it to suit your application.

Sample java code:

ComboBox comboBox = new ComboBox("Combobox");
comboBox.addStyleName("searchbox");

Sample SASS:

.v-filterselect-searchbox:before {
    font-family: FontAwesome;
    content: "\f002"; //search icon
    left: 10px;
    position: absolute;
    top: 0;
    line-height: 35px;
}

.v-filterselect-searchbox .v-filterselect-input{
    padding-left: 30px;
}

You'll probably need to adjust offset values to align the icon properly in your theme. Also, you'll have to set the combobox width explicitly, since input text padding is set in CSS.

comboBox.setWidth("400px");

The end result:

Euchre

worked. but how do i put a listener on the icon? i'm looking to use that icon as a button – Stockton

@ash__999, In this example, you won't be able to do it. You can try to create a button and move it inside the input with CSS. Another option is to implement a whole new component with GWT. P.S. In your example the icon is used for decoration only. You might want to update your question to include all the necessary requirements. – Euchre

I cannot imagine just yet how do you "create a button and move it inside the input with CSS". You mean manipulating z-index values or something? – Decagram

@Decagram Frankly, I didn't put much effort into this comment and I don't remember what exactly I had in mind. Most probably I was thinking about moving the button on top of the input field. Something similar to this: jsfiddle.net/5e6doc0m/3 – Euchre

Thanks, @defaultlocale – Decagram