4

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:

<template>
    <lightning-card>

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

            <div slot="footer">
               ...
            </div>
        </c-modal>        

</template>

Modal component Markup:

<template>
    <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>                    
                </header>

                <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">
                            {header}
                        </h2>
                    <slot></slot>
                </div>

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

        <div class="slds-backdrop slds-backdrop_open"></div>
    </template>
</template>
  • 1
    There is an open idea which would solve this issue: success.salesforce.com/ideaView?id=0873A0000003f6BQAQ – Christian Menzinger Nov 26 '19 at 15:19
  • Can you confirm that none of my 4 point currently can be solved? – Robert Sösemann Nov 26 '19 at 18:40
  • 1
    @Robert Sösemann The Modal height & width can be controlled. I have done it in my case – Mohit Kulkarni Dec 3 '19 at 18:19
  • @MohitKulkarni can you please add an answer an describe how you made it look like standard modals? – Robert Sösemann 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??? – Mohit Kulkarni Dec 4 '19 at 2:30
1

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? – Robert Sösemann Dec 2 '19 at 22:58
  • @Greg Rewis Thats great – Mohit Kulkarni Dec 3 '19 at 18:20
  • 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/… – Matthew Souther Jan 7 at 20:52
  • 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 at 22:54

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.