lightning-quick-action-panel footer stops rendering randomly

Question

I have a modal that seems to stop rendering footer completely randomly.

So far what worked was clearing cache, logging out, restarting browser (brave). Anything I do with code has no effect (comment out all JS, all HTML).

Now it's down to sample syntax

    <lightning-quick-action-panel header="header">
        body
        <div slot="footer">
            footer
        </div>
    </lightning-quick-action-panel>

Down to this result:

Looking via chrome dev tools I can see slds-hide class is not removed from footer for some reason.

Edit: I also use this component wrapped in aura's lightning:isUrladdressable and force:lightningQuickActionWithoutHeader context, where this bug appeared again. Disabled all extensions I use to no avail. Restarting Brave browser did the trick tho.

Answer 1

I had a similar issue, using lightning-quick-action-panel made footer stop rendering in random behavior.

Adding a custom class to enforce visibility did the trick for me, at least as a workaround.

inside my component.html:

<div slot="footer" class="force-visible">

in component.css

.force-visible{
    visibility: visible !important;
}

Using api version 55.0

Answer 2

My work-around was to put the footer outside the lightning-quick-action-panel tag. class="slds-modal__footer" ensure the correct styling.

<lightning-quick-action-panel class="slds-is-relative" header={title}>
    <div class="" if:true={showContent}> content </div>
</lightning-quick-action-panel>
<div  class="slds-modal__footer">
    <lightning-button
        variant="neutral"
        label="Cancel"
        onclick={closeAction}
    ></lightning-button>
    <lightning-button
        variant="brand"
        label="Send Request"
        class="slds-m-left_x-small"
        onclick={sendRequest}
    ></lightning-button>
</div>

Answer 3

I upgraded to version 57, and it started to be more stable.