Non-Modal popup?

B"H

Hi, is there any OOTB solution to set a popup in non-modal state?

e.g. want to have open popup and still make change on background component

Thanks

Hi,

Vaadin 14.2 will bring that feature: https://vaadin.com/blog/vaadin-14.2-feature-update-is-in-beta

B"H

Thanks

what about same idea for a balloon and not dialog, e.g. bootstrap popover?

Probably can set Dialog to not show header and place it relevant to some component? is it possible?

Thanks

B"H
Hi
I was able to use non modal Dialog and with css to put it where I need.
My question now is, how can I close the dialog in case I do want this to be close by ESC or click outside it.

Currently this seems not to work with non modal Dialog.
Thanks

If it’s non modal dialog, click outside it won’t close it, same for close by ESC.

You have to code your own behavior, like add a button inside the dialog to close the dialog.
Like you can add a button:
new Button("close", event -> dialog.close())

B"H
Thanks

i need a bootstrap like component.

means non-modal that does close when blur.

This is my current trick

focus listener to show the bootstrap popup like using dialog

		text.addFocusListener(new ComponentEventListener<FocusEvent<TextField>>() {
			private static final long serialVersionUID = 1L;

			@Override
			public void onComponentEvent(FocusEvent<TextField> arg0) {
				if (!recentSearchesDialog.isOpened()){
					recentSearchesHandler.refreshRecentSearches(arg0.getSource().getValue());
				}else{
					if(textBlur == null){//once and only second time due to dialog limitations
						textBlur = text.addBlurListener(new ComponentEventListener<BlurNotifier.BlurEvent<TextField>>() {
							
							@Override
							public void onComponentEvent(BlurEvent<TextField> event) {
								recentSearchesDialog.close();
								textBlur.remove();
								textBlur = null;
							}
						});
					}
				}
			}
		});

the test input

		text.setValueChangeMode(ValueChangeMode.EAGER);
		text.addValueChangeListener(new ValueChangeListener<ComponentValueChangeEvent<TextField,String>>() {

			/**
			 * 
			 */
			private static final long serialVersionUID = 1L;

			@Override
			public void valueChanged(ComponentValueChangeEvent<TextField, String> event) {
				recentSearchesHandler.refreshRecentSearches(event.getSource().getValue());
			}
		});
		

lost the focus due to dialog and manipulate to get it back to create a blur event above

		public void refreshRecentSearches(String filterValue) {

			if(!recentSearchesDialog.isOpened()){
				List<String> recentSearches = getRecentSearchesList();
				if ((recentSearches == null) || (recentSearches.isEmpty())) {
					setWindowToNoRecentSearches();
				}
				else {
					updateByRecentSearches(recentSearches);
				}
				recentSearchesDialog.open();
				text.getElement().executeJs("setTimeout(function(){$0.focus()},1000)", text.getElement());

			}		

		}

Guy

You can call the close method for the event you want.

I don’t understand why you are not using a modal popup if you want to close it when you are outside.

B"H

because i manipulate the content of the non-modal balloon base on changes on the input that related to it

Perhaps you can add an example. I think you have an input and a dialog and you want to manipulate the input with the dialog opened.

if you want to close the dialog when the user left the input you can add addblurlistener on the input but I’m not sure if it helps.

B"H

this is what i did above. Trick wise because the first blur happens when dialog opened.

in addition i just notice that the focus trick change the dialog behave…

e.g.

i have button in dialog that can be pressed to do something. now after the focus fix, it simply close dialog and not call the button click event.

the idea, i have a list of recent searches, whenever i get into the search filed i want to show them + a “Clear History” button that go to service and cleanup.

Near the text i have a search button. search can be work by click search, or when click on one of the recent searches.

the recent search should be filtered during change content in text field.

Thats is the need, and that is why i am looking for non-modal popup

B"H

Well, finally found that it easier to use Div and set position fixed + play with its visibility.

the only problem is still that the blur event comes before any internal event in the so-called popup, those events basically not happened.

Anyway, looks like this is the correct approach for such.

Hope to find solution to the blur event soon

Thanks a lot!

Guy

Sorry, I’ve just seen the example after my message.

It’s probably easier to use a Div with fixed or absolute position. In this case you can control where the dom is created.