In my LWC app, I created a custom modal component to mimic standard Salesforce modals displayed during Record Type selection. I'm suffering from a few glitches where it doesn't look and behave like the native ones:

  1. Modal doesn't trap the focus. Stepping through using the keyboard's TAB key also reached visually blocked elements in the background enter image description here
  2. Background scrolls when I use the mouse wheel
  3. ESC-key on the keyboard doesn't close the modal
  4. Modal width looks different that native width enter image description here

Here is my code:

LWC component using the modal:


        <c-modal header={header}>
            <div class="slds-grid slds-gutters slds-p-top--large">

            <div slot="footer">


Modal component Markup:

    <template if:true={showModal}>
        <section role="dialog" class="slds-modal slds-fade-in-open">
            <div class="slds-modal__container modal-container">
                <header class="slds-modal__header hidden-header">
                    <lightning-button-icon class="slds-modal__close" title="Close" icon-name="utility:close" variant="bare"
                        icon-class="slds-button__icon slds-button__icon_large slds-button_icon-inverse" onclick={notifyParentOnClose}></lightning-button-icon>                    

                <div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1">
                        <h2 class="inlineTitle slds-p-horizontal--medium slds-p-bottom--medium slds-text-heading--medium modal-header">

                <footer class="slds-modal__footer modal-hidden">
                    <slot name="footer" onslotchange={handleSlotFooterChange}></slot>

        <div class="slds-backdrop slds-backdrop_open"></div>
  • 1
    There is an open idea which would solve this issue: success.salesforce.com/ideaView?id=0873A0000003f6BQAQ Nov 26 '19 at 15:19
  • Can you confirm that none of my 4 point currently can be solved? Nov 26 '19 at 18:40
  • 1
    @Robert Sösemann The Modal height & width can be controlled. I have done it in my case Dec 3 '19 at 18:19
  • @MohitKulkarni can you please add an answer an describe how you made it look like standard modals? Dec 3 '19 at 18:33
  • @Robert Sösemann Just to understand your requirement....You need to open/create standard record type selection modal on click of button... right??? Dec 4 '19 at 2:30

We have created a new LWC Base Component for modals, called lightning-dialog. It will be available in the Spring'20 release which will hit sandboxes in early January.

  • 1
    Great news! I guess this new base component will fix most of my issues, right? Dec 2 '19 at 22:58
  • @Greg Rewis Thats great Dec 3 '19 at 18:20
  • 1
    Safe harbor alert! I had been keeping an eye out for this new base component, but it looks like it didn't make it into Spring '20. releasenotes.docs.salesforce.com/en-us/spring20/release-notes/… Jan 7 '20 at 20:52
  • 2
    Hey all -- sadly, we were unable to release the new component as we have run into some stacking context issues that we want to solve before rolling the component out. We are actively engaged in this as we speak and I hope to have an update soon. (But you can always tag me if you haven't heard from me in a while...)
    – Greg Rewis
    Jan 8 '20 at 22:54
  • Any update on this - hasn't made Summer?
    – Keith C
    Jun 30 '20 at 9:46

This has unfortunately morphed into a larger project involving multiple teams, due to the stacking context issues.


FWIW Dec. 2020 and still not there. The lwc-recipes github repo has a modal lwc but it requires createElement which is not in lwc until 2021! (Supposedly available in a preview scratch org but that is useless to me.) I am using James Simone's lwc-modal which works well. https://github.com/jamessimone/lwc-modal In my case I am overriding the Change Owner button to create a new enhanced window. I have a quick action opening an aura lightning component that wraps a lightning web component. Then I use lwc-modal to make a Result Messages popup after some processing is done. Since it is a modal showing on top of a modal, I had to test the different cases of clicking outside the modal, in the X box, etc. It takes quite a while to figure out all these little bits. For example it took a while to figure out how to increase the width of the lwc-modal popup but not the parent popup window. (use css attribute selector). Also it is really hard (maybe impossible I think) to perfectly reproduce the css styling of a standard quick action window in the LWC alone; I get padding around the outside. Salesforce really needs to cut through all of the horribleness here.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.