spectrum-web-components icon indicating copy to clipboard operation
spectrum-web-components copied to clipboard

[Bug]: dissmissable attribute on dialog hides slot=button

Open SavoInfostream opened this issue 1 year ago • 1 comments

Code of conduct

  • [X] I agree to follow this project's code of conduct.

Impacted component(s)

sp-dialog

Expected behavior

slot=button content to be visible when dissmissable attribute is set on sp-dialog

Actual behavior

slot=button content is hidden with display: none;

Screenshots

No response

What browsers are you seeing the problem in?

No response

How can we reproduce this issue?

  1. Go to '...'
  2. Click on '....'
  3. Scroll to '....'
  4. Check console
  5. See error

Sample code or abstract reproduction which illustrates the problem

No response

Severity

None

Logs taken while reproducing problem

No response

SavoInfostream avatar Aug 16 '24 15:08 SavoInfostream

Could you please create an abstracted version of this issue by forking this starter? @SavoInfostream

najikahalsema avatar Oct 08 '24 21:10 najikahalsema

I'm having this issue aswell. It's quite confusing. Problem is present with this templated Lit code:

        <overlay-trigger mode="modal" triggered-by="click">
            <sp-dialog-base
                slot="click-content"
                underlay
            >
                <sp-dialog size="l" dismissable>
                    <h2 slot="heading">Simulation input for {headline}</h2>
                    <div class="json-view" style="max-height: 720px;">
                        {driftersJson}
                    </div>
                    <sp-button
                        slot="button"
                        @click="{Ev (fun ev -> console.debug("click ok"))}"
                    >
                        Clone
                    </sp-button>
                </sp-dialog>
            </sp-dialog-base>
            <sp-action-button
                id="drifter-info-button"
                slot="trigger"
                ?disabled="{archiveOpt.IsNone}"
            >
                <sp-icon-info slot="icon"></sp-icon-info>
            </sp-action-button>
        </overlay-trigger>

Below is a screenshot of the produced html and css in google chrome:

Image

I want the "Clone" button to show no matter what, but when I add "dismissable" to the inner <sp-dialog> it disappears. From the image you can clearly see that it says the button group should have set display none if the host has attribute dismissable. Which doesn't seem right to me. However, if I move the dismissable to the <sp-dialog-base>, then it works, but I no longer get the close button in the inner dialog. Which I want.

SimenLK avatar Sep 25 '25 11:09 SimenLK