Notification position relative to ComboBox

Hello!
I am trying to position a notification below a ComboBox input field.
I want to display a “Not Found” notification when the user searches for something in the ComboBox that the AbstractBackEndDataProvider does not find.

How do I position a notification below a ComboBox with Vaadin24?

That’s not really possible with Notifications… only thing that comes to mind is the usage of the newly added tooltips with custom open/close timeouts

We had a hackish way of doing it in Vaadin14 which stopped working in the upgrade.

popup.addOpenedChangeListener(this::positionNotificationNextToFieldWhenOpened);

private void positionNotificationNextToFieldWhenOpened(Notification.OpenedChangeEvent openedChangeEvent) {
        if (openedChangeEvent.isOpened()) {
            var popup = openedChangeEvent.getSource();
            openedChangeEvent.getSource().getElement()
                    .executeJs(
                            "$0.$['vaadin-notification-card'].style['align-self']='flex-start';" +
                                    "$0.$['vaadin-notification-card'].style['position']='absolute';" +
                                    "$0.$['vaadin-notification-card'].style['top']= ($1.getBoundingClientRect().top + $1.getBoundingClientRect().height )+ 'px';" +
                                    "$0.$['vaadin-notification-card'].style['left']= $1.getBoundingClientRect().left + 'px'",
                            popup,
                            getElement()
                    );
        }
    }

May I suggest displaying an error message or a helper text instead?

The ComboBox is located in a thin mainheader of a site so an error message wouldn’t look nice :slightly_smiling_face:

Then I’d go with a programmatically triggered tooltip https://vaadin.com/docs/latest/components/tooltip#triggering-manually

That seem to work fine for me but how can I style the text inside it? Can’t add a class

Would be interesting to know if it really can’t work, or if it just requires adjustments to the magical javascript incantation.
There is a cookbook entry for how to do this with a Dialog. I haven’t tried it yet, but the form is similar, so I would assume both should work, or neither?: https://cookbook.vaadin.com/button-popup

Most of the time “everything” (most of the stuff) is somehow possible by relying on internal of non standard APIs, so I’m personally often hesitant to recommended such paths, especially since those are the paths that are likely to break in or or another way - sometimes even without people noticing if not really good test coverage (with screenshot comparison) is in use and developer are updating their software - even a patch upgrade could theoretically remove / change private APIs you habe preciously relied on.

This selector from the docs should help you to style it: vaadin-tooltip-overlay::part(content)

I think there is a way in Java Swing when using JOPtionPane. Vaadin team can think of something similar

I was also thinking that, from a UX point of view, having a pop-up appear just to say a combobox search didn’t find any results sounds quite annoying, at least unless it’s super small and guaranteed not to block anything else, but it’s hard to tell without seeing the UI…

What I find annoying is that I have to visually check if Combobox accepted what I wrote, or if it reset it to its previous value.
I really like the new multi-value select, but still don’t know if we can use ComboBox at all in our Vaadin20+ upgrade
Also never understood why the dropdown panel isn’t just a grid, so that we can display multiple columns. That’s what our V7 combobox replacement did.

You can add a custom LitTemplate renderer to the drop-down and display anything as you want. Keep in mind that this isn’t announced by Screenreader (accessibility concern).