6

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

3 Answers 3

3

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.

7
  • 1
    Great news! I guess this new base component will fix most of my issues, right? Commented Dec 2, 2019 at 22:58
  • @Greg Rewis Thats great
    – Mohit K
    Commented Dec 3, 2019 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/… Commented Jan 7, 2020 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
    Commented Jan 8, 2020 at 22:54
  • Any update on this - hasn't made Summer?
    – Keith C
    Commented Jun 30, 2020 at 9:46
4

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

2

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.

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .