Kitchen sink dialog modal buttons closing and running functions regardless of what buttons are pressed

Photoshop UXP Plugin API
1

I’ve implimented the kitchen sink dialog modal and my issue is, no matter what, any button fires the code. I want the x button on top to close as well as a cancel button. I have 4 buttons in the dialog that will fire 4 different functions. However, clicking on any of the 4 buttons does nothing. it isn’t until you click either the x or the cancel button that fires the code.

What I need is to run the code for the button pressed and then close the dialog.

Here is my JS

 // dialog handling
document.querySelector("#btnOpenDialog").onclick = () => {
   document.querySelector("#dlgExample").uxpShowModal({
     title: "Wood Ornament Options",
     resize: "none", // "both", "horizontal", "vertical",
     size: {
       width: 480,
       height: 440
     }
   });
 };

 // enable dialog buttons to close
Array.from(document.querySelectorAll("#dlgExample sp-button")).forEach(button => {
   button.onclick = () => document.querySelector("#dlgExample").close();
 });

function dialogTest(){
   console.log("it worked");
}

 document
 .getElementById("orn-style1")
 .addEventListener("click", function() {playAction('WoodOrnament-Style1')});

 document
 .getElementById("orn-style2")
 .addEventListener("click", function() {playAction('WoodOrnament-Style2')});

 document
 .getElementById("orn-style3")
 .addEventListener("click", ()=> {playAction('WoodOrnament-Style3')});

 document
 .getElementById("orn-style4")
 .addEventListener("click", function() {playAction('WoodOrnament-Style4')});

and here is the HTML

<sp-action-button id="btnOpenDialog">Wood Ornaments</sp-action-button>
        <dialog id="dlgExample">
          <form method="dialog">
            <sp-heading>Wood Ornaments</sp-heading>
            <sp-divider size="large"></sp-divider>
            <sp-body>Please Choose The Style You'd like to Mockup</sp-body>
            <div class="ornament-styles">
              <div id="orn-style1" class="orn-style"><img src="icons/ornament-style1.png" width="100px"></div>
              <div id="orn-style2" class="orn-style"><img src="icons/ornament-style2.png" width="100px"></div>
              <div id="orn-style3" class="orn-style"><img src="icons/ornament-style3.png" width="100px"></div>
              <div id="orn-style4" class="orn-style"><img src="icons/ornament-style4.png" width="100px"></div>
            
            </div>
            <footer>
              
              <sp-button id="button2" variant="cta">Cancel</sp-button>
2

What does your playAction() do?

3

Also, is it possible that you’re overwriting the click handler? At first you add it in the loop and afterwards you add it manually - or are those different buttons? Not even sure right now if an element can have multiple listeners/handlers for the same event.

4

Handlers also looked suspicious to me, because loop is for one “Cancel” sp-button only and then below separate handler assignments to each div#orn-style{x}. So my concern was if HTML or JS here is not what’s on the machine.

5

Ok, I see what you all are saying. Perhaps my issue is that I never modified the existing dialog code. I’m lost as to the syntax for running more than one operation. The close and the playaction() can be ran together so that each click runs the the action and closes the dialog.

document
 .getElementById("orn-style1")
 .addEventListener("click", function() {playAction('WoodOrnament-Style1')}
document.querySelector("#dlgExample").close());

I know I’m missing something but the above code with the right syntax seems like the solution.

upon further experiments, I’ve commented out the entire loop to close the dialog and odd thing is, it still runs the action when you hit the x to close the dialog.

6

Maybe showing more of the (current) code would help again. From what I see this doesn’t seem to be related, but still worth pointing out: By default, a button’s type is "submit" (not sure if same applies to sp-button), so every button without type="button" would naturally submit the form and consequently close the dialog, as you have method="dialog" on the form:

<form> elements can close a dialog if they have the attribute method="dialog" . When such a form is submitted, the dialog closes with its returnValue property set to the value of the button that was used to submit the form.

So maybe if you also have some listener on the form submit or dialog close, this could be relevant.