TextField focus - Vaadin 24

General
1

Hi,

I have one Text Field for a search functionality. The use case is, If I type 3 letters for the search value a new Dialog is opened with Search Results. This Dialog has a grid with each row matches the search pattern from the Text Field.

Now I want to type more letters to get an exact match in the grid, but the focus is not there in the search field. After opening the popup the focus is set using the code, but still the focus is not there.

Please find the code snippet below.

       // value change listener for text field
       searchBox.addValueChangeListener(event -> {
           if (event.isFromClient() && event.getValue().length() >= 3) {
               //refresh the grid with search result
   			dataView.refreshAll();
   			//set the position of the dialog
               resultDialog.getElement().executeJs("this.$.overlay.$.overlay.style[$0]=$1", "align-self", "flex-start");
               resultDialog.getElement().executeJs("this.$.overlay.$.overlay.style[$0]=$1", "position", "absolute");
               resultDialog.getElement().executeJs("this.$.overlay.$.overlay.style[$0]=$1", "left", "10px");
               resultDialog.getElement().executeJs("this.$.overlay.$.overlay.style[$0]=$1", "top", "250px");
               resultDialog.open();
               Page page = resultDialog.getUI().get().getPage();
               page.executeJs("const overlay = document.querySelector('vaadin-dialog-overlay');" +
                       "overlay.classList.add('left-aligned-overlay');");
   			// focus the text field		
   			searchBox.focus();
   			 
           } else {
               resultDialog.close();
           }
       });

Could somebody please help?

Best Regards,
Amal Suresh

2

Hi, by default dialogs move focus to the overlay when opened. Consider using resultDialog.setModal(false); to make it possible to keep interacting with the field.

BTW, there will be Popover component coming in 24.5 (currently in alpha) which should handle such cases better than the Dialog.

3

yes, the setModal is already false. This will only allow to click on the text field to set the focus back.