0

I have a flow modal that is generated via the lightning:overlayLibrary showCustomModal(). Is it possible to remove the default focus (or at least hide the focus with CSS) that is applied to the close button on these modals?

screenshot

Code that creates the modal:

 $A.createComponents([
        ['c:gFlowContainer', flowParameters],
        ['c:gModalOverlayHeader', {title: component.get('v.modalSettings').title}],
    ],
    function(components, status) {
        if (status === 'SUCCESS') {
            modalBody = components[0];
            modalHeader = components[1];
            component.find('overlayLib').showCustomModal({
                header: modalHeader,
                body: modalBody,
                showCloseButton: typeof component.get('v.modalSettings').showCloseButton !== 'undefined' ? component.get('v.modalSettings').showCloseButton : true,
                cssClass: component.get('v.modalSettings').cssStyling,
                closeCallback: function() {
                    // let our parents know to do any afterAction tasks
                    component.getEvent('afterAction').fire();
                },
            }).then(function(overlay) {
                // unused at the moment
            });
        }
    });

Playing around with styling the close button (have been unsuccessful to "style away" the focus outline:

<aura:component >    
<lightning:overlayLibrary aura:id="overlayLib"/>

<!-- Parameters -->
<aura:attribute name="recordId" type="Id" description="Record Id"/>
<aura:attribute name="name" type="String" default="needsaname" description="The string to use as a name of the modal" />
<aura:attribute name="modalSettings" type="Object" default="{ title: 'Specify Title' }" description="This object holds modal settings" />
<aura:attribute name="flowSettings" type="Object" default="" description="This object holds flow settings" />
<aura:attribute name="lightningSettings" type="Object" default="" description="This object holds lightning component settings" />

<!-- Methods -->
<aura:method name="showModal" action="{! c.handleShowModal }" access="PUBLIC"/>
<aura:method name="showModalWithParams" action="{! c.handleShowModalWithParams }" access="PUBLIC">
    <aura:attribute name="actionDefinition" type="List" description="The action definition"/> 
    <aura:attribute name="recordIdIn" type="Id" description="The recordId to be used."/> 
</aura:method>

<!-- Events Fired -->
<aura:registerEvent name="afterAction" type="c:evtClick" description="Event fired when an action is complete"/>

<aura:html tag="style">
.slds-modal__close {
    color:#2ecc71;
}

</aura:html>    

</aura:component>

1 Answer 1

1

Was able to remove the styling by adding this to my component markup:

<aura:html tag="style">
.slds-modal__close:focus {
    color: var(--slds-c-button-brand-text-color, 
        var(--sds-c-button-brand-text-color, 
        var(--lwc-colorTextBrandPrimary,rgb(255, 255, 255)))); 
        border: 0px; 
        box-shadow: 0 0 0 0;
}
</aura:html> 

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.