SP-Dialog Close Button Not Working

I have been following some tutorial videos by @DavideBarranca using the sp-dialog.

I can get it to close the dialog using his examples in the video when using Manifest 4 but not with Manifest 5.

Has something changed in Manifest 5 ?

After further testing, I can get the SP-Dialog to work if it is not opened from a Flyout Menu

With Manifest 5, I can get the SP-Dialog to open from a Flyout Menu but pressing the Close button does nothing.

Using Manifest 4 works as expected.

This is the code in the Flyout Menu

invokeMenu(id) {
                const {
                    menuItems
                } = entrypoints.getPanel("vanilla");
                switch (id) {

                    case "about":
                        // About();
                        document.querySelector("#dialog").setAttribute("open");
                        break;
}

This is my HTML code

<sp-dialog id="dialog">
		<sp-body slot="description">
			Welcome to my dialog
		</sp-body>

		<sp-button-group slot="buttongroup">
			<sp-button variant="primary" onclick="document.querySelector('#dialog').removeAttribute('open')">
				Close
			</sp-button>
		</sp-button-group>
		
	</sp-dialog>

What if you open it with document.querySelector("#dialog").uxpShowModal()?
And close with document.querySelector("#dialog").close()

I am unable to show the Dialog using the above. Do I need to declare something to use uxpShowModal()

Thinking it may be my Manifest, I put my code into the Kitchen Sink and it still doesn’t work.
Maybe @kerrishotts can throw some light on this one.

From a Flyout Menu:
Programmatically Dialog Works
SP-Dialog Opens but doesn’t close

Not that I’m aware of
Actually I’m using plain dialog instead of sp-dialog, but would need to test it for sure on manifest v5 later

Manifest V5 explicitly disallows executing code as strings by default – this includes inline event handlers. (You can enable this, but it’s intended only for debugging files with source maps.)

You should add an event handler explicilty using addEventListener or onclick in your JS code.

(That v4 allowed this in Ps was technically an accident, but we can’t go disable it in v4 w/o breaking plugins that took advantage of it. But the intent is that code should not be executed from “strings” and v5 makes that the default state.)

So, for this case:

document.querySelector("#dialog sp-button[variant=primary]").onclick= 
    () => document.querySelector('#dialog').removeAttribute('open');
// OR
document.querySelector("#dialog sp-button[variant=primary]").addEventListener("click", 
    () => document.querySelector('#dialog').removeAttribute('open'));

And then the click will work.

(I’m just now realizing that our blog post on the changes in Ps w/ manifest v5 doesn’t include this little nugget. Thought we’d covered everything, but apparently not! I guess a new blog post & doc update is in order…)

1 Like

Thanks @kerrishotts both ways tested and working now :slight_smile:
Are there any other nuggets we should be aware about before using Manifest V5.

Read the Medium articles:

That should catch you up.