Created a modal component, copying LDS modal blueprint html.
Inside lightning-button-menu have a button that shows the modal on click.
Overall, html structure looks like the following:
<lightning-button-menu> <c-button> <c-modal> </c-modal> </c-button> </lightning-button-menu>
The problem is that Modal has
slds-modal css class, specifying
Usually that would not be a problem, unless a parent has
transform property. Out of the box lightning-button-menu has
slds-dropdown--right css classes with transform properties. Which messes up modal positioning - it is hiding in a dropdown.
How would one approach the solution?
- Remove transform property on parents? (Shadow DOM makes it hard to modify OOTB components)
- Pull the modal out of the button to root and communicate with it using events/message channel?
From my findings it is not just
lightning-button-menu with transform properties, but nesting modals within modals has the same issue too.