You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
When a modal overlay component, such as a combo-box, is opened in a dialog, the dialog's header and footer content remains accessible to mouse interactions, while the dialog's content does not.
Screen.Recording.2024-09-24.at.10.34.44.mov
Expected outcome
Modal overlay components, when opened, should prevent interaction with any content under their backdrop.
Minimal reproducible example
<vaadin-dialog></vaadin-dialog><vaadin-button>Open dialog </vaadin-button><scripttype="module">import'@vaadin/dialog';import'@vaadin/button';import'@vaadin/combo-box';constdialog=document.querySelector('vaadin-dialog');dialog.headerTitle='Title';dialog.renderer=(root)=>{if(root.firstChild){return;}constcontainer=document.createElement('div');container.style.width='400px';constcomboBox=document.createElement('vaadin-combo-box');comboBox.label='Country';comboBox.items=['Finland','France','Germany','Italy','Spain','United Kingdom','United States'];container.appendChild(comboBox);constcloseButton=document.createElement('vaadin-button');closeButton.textContent='Close from content';closeButton.addEventListener('click',()=>{dialog.opened=false;});container.appendChild(closeButton);root.appendChild(container);};dialog.headerRenderer=(root)=>{if(root.firstChild){return;}constcloseButton=document.createElement('vaadin-button');closeButton.textContent='Close from header';closeButton.addEventListener('click',()=>{dialog.opened=false;});root.append(closeButton);};dialog.footerRenderer=(root)=>{if(root.firstChild){return;}constcloseButton=document.createElement('vaadin-button');closeButton.textContent='Close from footer';closeButton.addEventListener('click',()=>{dialog.opened=false;});root.append(closeButton);};// Open first dialogconstopenDialogButton=document.querySelector('vaadin-button');openDialogButton.addEventListener('click',()=>{dialog.opened=true;});</script>
Steps to reproduce
Click "Open Dialog"
Click on the combo-box to open it
Observe that "Close from header" and "Close from footer" buttons respond to hover and clicks while "Close from content" does not.
Environment
Vaadin version(s): 24.4 and possibly earlier
OS: Mac OS
Browsers
No response
The text was updated successfully, but these errors were encountered:
Description
When a modal overlay component, such as a combo-box, is opened in a dialog, the dialog's header and footer content remains accessible to mouse interactions, while the dialog's content does not.
Screen.Recording.2024-09-24.at.10.34.44.mov
Expected outcome
Modal overlay components, when opened, should prevent interaction with any content under their backdrop.
Minimal reproducible example
Steps to reproduce
Environment
Vaadin version(s): 24.4 and possibly earlier
OS: Mac OS
Browsers
No response
The text was updated successfully, but these errors were encountered: