jamessimone / lwc-modal

Accessible, composable modal for Salesforce.com (SFDC)'s Lightning Web Components (LWC) system

Give Me The Lowdown

Hi! Thanks for visiting my Github profile. I'm a Salesforce employee and .net/TypeScript enthusiast.

I'm the author of:

• the sci-fi/fantasy novel A Good Thing Never Stops
• the ongoing Salesforce Apex programming series, The Joys Of Apex. I'm always looking for quality SFDC content for the Joys Of Apex — you can reach out if you're interested in contributing a guest post(s)!
• Apex Rollup, the free & open-source Salesforce custom rollup solution
• Salesforce Round Robin, which allows for easy & customizable round robin implementations within your Salesforce org

Salesforce Repos

There are a number of repositories I maintain or contribute to related to Apex that may strike your fancy:

• Apex Rollup - free, CMDT/Invocable/Apex-driven rollup solution aiming to deprecate DLRS. One line of code to install.
• Apex Mocks — started off as a comparison between a small CRUD wrapper and the larger FFLib library; there are now many branches related to specific Joys Of Apex posts
• Apex DML Mocking - a very lightweight Factory and Repository implementation allowing for easy mocking and strongly-typed queries
• lwc-modal — an accessible, composable Lightning Web Component Modal that can be dropped in to any project
• lwc-paginator — another drop-in LWC, this time for pagination
• Nebula Logger — The most popular Salesforce logging framework, maintained by my good friend @jongpie. Nebula Logger makes it easy to consolidate logging across both the declarative and code-based parts of your Salesforce org, and has a burgeoning suite of plugins capable of further enhancing your logging functionality, making it easy to do things like log to Slack!

Gatsby Plugins

I've written or contributed to several Gatsby plugins, in addition to contributing to Gatsby itself:

• gatsby-remark-google-analytics-track-links — adds the ability to use GA from links created from your Markdown
• gatsby-remark-codefence — brings Codefence syntax highlighting and interactive code sessions into your site by replacing code snippets in Markdown with Codefence HTML
• gatsby-remark-footnotes — allows you to customize the style applied to your footnote markers in Markdown

✨ Other Work ✨

I've worked on a variety of e-commerce sites, using everything from Wordpress and Shopify to in-house React / .net MVC / Angular solutions. You can see some of my work on:

• EF Ultimate Break
• Cat Tongue Grips
• Kokopelli Packrafts
• Wacaco

In addition, I also run the adventure travel blog She & Jim, which includes a fantastic recipe section 🤤.

lwc-modal's Issues

All event handler on wrapper must use stopPropagation()

First of all, your solution is very much helpful. i've spent 3 days and still have no idea how to create a modal component that's conforming with LDS guidelines. So thankyou very much for sharing your solution

And i'm quite new to LWC and html, so please excuse me if my understanding is wrong.
Is it correct that using your solution, all event handler of the Wrapper component for the modal must use event.stopPropagation(); or else they will trigger the click listener inside the modal component hence toggling isOpen property ?

How about if the isOpen state is placed on the wrapper instead, so that the Modal component just need to dispatch event, this way all wrapper event Handler won't need to configure event.stopPropagation();

Shift + Tab - breaks trapped focus

When I press Shift + Tab, the focus is moved outside the modal

doesnt seem to work anymore

This is what I see with spring 22

record-edit-form does not work inside the modal

Embeding ligthning-record-edit-form inside the modal shows weird behavior.

• all fields are set as errors
• the 'required' validation is not working

<c-modal modal-header="Create New Claim"
             modal-save-handler={firstModalSaveHandler}
             modal-button-text="Save"
             data-id="first-modal">
        <div slot="modalContent" class="modalContent slds-modal__content slds-p-around_medium">
            <lightning-record-edit-form object-api-name="ImpartnerMDF__FundsClaim__c" onsuccess={handleSuccess}>
                <lightning-messages></lightning-messages>
                <lightning-input-field field-name="ImpartnerMDF__FundsRequest__c" value={recordId} disabled></lightning-input-field>
                <lightning-input-field field-name="ImpartnerMDF__PaymentAmount__c" required></lightning-input-field>
                <lightning-input-field field-name="ImpartnerMDF__InvoiceNumber__c" required></lightning-input-field>
                <lightning-input-field field-name="Invoice_Payee_Name__c" required></lightning-input-field>
                <lightning-input-field field-name="Invoice_Date__c" required></lightning-input-field>
            </lightning-record-edit-form>
        </div>
    </c-modal>

 firstModalSaveHandler = (event) => {
        this.template.querySelector('lightning-record-edit-form').submit();
    }

    lastClaimId;

    handleSuccess(event) {
        const file = this.template.querySelector('lightning-file-upload');
        file.recordId = event.detail.id;
        this.lastClaimId = event.detail.id;

        this.template.querySelector('[data-id="first-modal"]').toggleModal();
        this.template.querySelector('[data-id="second-modal"]').toggleModal();
    }