Combobox and suffix slot

Question

I want to add a component to ComboBox's suffix slot. Based on an old Vaadin forum topic you can do it in Vaadin 13, but it doesn't work with Vaadin 22. Is it possible to do this?

score 3 · Accepted Answer · edited Jan 05 '22 at 11:03

3

There is a better example of setting components to prefix slot of the selected components in Cookbook, which works also with Vaadin 22. The JavaScript method in Forum relies on internal structure of the component that has been changed in Vaadin 22 in order to improve accessibility support.

You can modify the linked recipe to suffix slot as well, but just note that these components have their own button already in the suffix slot, so in most cases, it is not a good idea from the UX perspective to add additional components there.

edited Jan 05 '22 at 11:03

ollitietavainen

3,900
13
30

answered Jan 05 '22 at 09:10

Tatu Lund

9,949
1
12
26

But in Combobox exist clearButton div with slot 'suffix'
And all work fine. I tried add new div with slot="suffix" before clearButton through JS + vaadin-icon inside new div. And again work fine. It's not clear why the API is not added? – gidravlic Jan 05 '22 at 10:23
"It's not clear why the API is not added?", I think there are basically two reasons. We have thought that having bunch of buttons in small space is bad UX and we have not decided to promote that. Also API would lock us for future developments of the component in certain way. So thus we usually start with smaller set of API and gradually add those when we are more certain about the direction, demand and other things. – Tatu Lund Jan 05 '22 at 14:28
OK, Tatu thanks for answers – gidravlic Jan 05 '22 at 14:42

gidravlic · Answer 2 · 2022-08-15T05:20:26.883

In order to make comments(reputation), I have to do something useful for the community.

Workaround:

 public static Div setComponentSuffix(Component target, Component component) {
        var div = new Div();
        div.getStyle()
                .set("width", "auto !important");
        div.getElement()
                .setAttribute("id", "my-id")
                .setAttribute("slot", "my-suffix")
                .setAttribute("part", "my-icon")
                .appendChild(component.getElement());
        target.getElement().appendVirtualChild(div.getElement());
        setSuffix(target, div);
        target.addAttachListener(attachEvent -> setSuffix(target, div));
        return div;
    }

    private static void setSuffix(Component target, Component suffix) {
        removeSuffix(target);
        target.getElement()
                .executeJs("const inputSlot = this.shadowRoot.querySelector('div > vaadin-input-container > slot[name=input]');"
                        + "inputSlot.parentNode.insertBefore($0, inputSlot.nextSibling);", suffix.getElement());
    }

    private static void removeSuffix(Component target) {
        target.getElement()
                .executeJs("const suffix = this.shadowRoot.querySelector('#my-id');" +
                        "if (typeof(suffix) != 'undefined' && suffix != null) {" +
                        "  suffix.remove();" +
                        "}");
    }

call

setComponentSuffix(<My field with vaadin input>, <My component suffix>);

Combobox and suffix slot

2 Answers2