Hi,
I am trying to create a searchfilter with autosuggestion with a searchbutton next to it (see picture attached).
For this I am using a ComboBox component for which the toggle button is hidden with a regular button. In the ComboBox I attach a Treeset with Strings.
The design works beautifully apart from one particular use case where the user sets a custom value.
![https://pasteboard.co/JnxHGfI.png]
(https://pasteboard.co/JnxHGfI.png)
- If i enter a custom value (so the value is not found in the Treeset), the ComboBox gains focus
- When I click the searchButton (or anywhere else in the UI screen), the click event is always triggered for the ComboBox to loose focus.
Even when I click on the button, I see the button click happening (small color change on buttonclick) but the clickevent never gets registered - Only the second click event, on the button or anywhere else in the screen, is registered serverside
I go around this to add a customValueListener that programatically clicks the button so when the user clicks the button for a custom search he has the impression it functions as designed. However, if you click anywhere else on the page, the same customValueListener triggers the button click and the search is started even though it might have not been the intention of the user
I could solve this odd (but probably intended) behaviour if only my button would register the click regardless the ComboBox focus state.
Is there a way around this to register in any circumstance the buttonclick ?
Code below :
private Component addSearch() {
Icon magnifyingGlass = VaadinIcon.SEARCH.create();
HorizontalLayout searchLayout = new HorizontalLayout();
searchLayout.setMargin(false);
searchLayout.setPadding(false);
ComboBox<String> searchbar = new ComboBox<>();
searchbar.setPlaceholder("Search a Stream Id");
searchbar.setItems(streamIdListString);
searchbar.setWidth("50vw");
searchbar.setAllowCustomValue(true);
searchbar.setAutofocus(true);
searchLayout.setJustifyContentMode(FlexComponent.JustifyContentMode.CENTER);
searchLayout.setVerticalComponentAlignment(FlexComponent.Alignment.CENTER);
searchLayout.setAlignItems(FlexComponent.Alignment.CENTER);
searchLayout.setWidthFull();
searchLayout.setHeight("40vh");
Button searchButton = new Button();
searchButton.getElement().getStyle().set("margin", "0");
searchButton.setIcon(magnifyingGlass);
searchButton.addClickShortcut(Key.ENTER);
searchButton.addThemeVariants(ButtonVariant.LUMO_PRIMARY);
searchButton.addClickListener(click -> {
if (!appUserHasAnalyzerReadPermission())
new VirtorgFailNotification(i18n.getProperty("ui.homepage.norights"));
else if (searchbar.getValue() == null && customInput.isEmpty())
new VirtorgFailNotification(i18n.getProperty("ui.messages.emptystreamid"));
else {
if(searchbar.getValue() != null && !searchbar.getValue().isEmpty())
analyseView.searchStreamId(searchbar.getValue());
else if (!customInput.isEmpty())
analyseView.searchStreamId(customInput);
ui.navigate(analyseView.getClass());
}
});
searchbar.addCustomValueSetListener(custom -> {
customInput = custom.getDetail();
searchButton.click();
});
searchLayout.add(searchbar, searchButton);
return searchLayout;
}
Or anybody else with a brilliant idea ?
Regards,
Jorn
