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 position: fixed
.
Usually that would not be a problem, unless a parent has transform
property. Out of the box lightning-button-menu has slds-dropdown
and 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.