Open vursen opened 2 weeks ago
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.
https://github.com/user-attachments/assets/d56b47e3-7407-4868-8a9c-c2e9c2ea0afb
Modal overlay components, when opened, should prevent interaction with any content under their backdrop.
<vaadin-dialog></vaadin-dialog> <vaadin-button>Open dialog </vaadin-button> <script type="module"> import '@vaadin/dialog'; import '@vaadin/button'; import '@vaadin/combo-box'; const dialog = document.querySelector('vaadin-dialog'); dialog.headerTitle = 'Title'; dialog.renderer = (root) => { if (root.firstChild) { return; } const container = document.createElement('div'); container.style.width = '400px'; const comboBox = document.createElement('vaadin-combo-box'); comboBox.label = 'Country'; comboBox.items = ['Finland', 'France', 'Germany', 'Italy', 'Spain', 'United Kingdom', 'United States']; container.appendChild(comboBox); const closeButton = 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; } const closeButton = 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; } const closeButton = document.createElement('vaadin-button'); closeButton.textContent = 'Close from footer'; closeButton.addEventListener('click', () => { dialog.opened = false; }); root.append(closeButton); }; // Open first dialog const openDialogButton = document.querySelector('vaadin-button'); openDialogButton.addEventListener('click', () => { dialog.opened = true; }); </script>
Vaadin version(s): 24.4 and possibly earlier OS: Mac OS
No response
im interested please assign me, ill share my proposed solution as soon as u ping me
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.
https://github.com/user-attachments/assets/d56b47e3-7407-4868-8a9c-c2e9c2ea0afb
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