How to close dialog before performing an action?

Photoshop UXP Plugin API
1

In my plugin, when the user presses the “Make comps” button the “Create Layer Comp” dialog appears like this:

image
image808×660 37.2 KB

Once I press “Create” on the new dialog I collect the new form value and run createComps() function:

layersToShow = [];
    lx = [];
    cbDivs=$("#dialogBodyComps").children();
    if(cbDivs.length>0){
        for (var i = 0; i < cbDivs.length; i++) {
            if(cbDivs[i]._firstChild.checked){
                ll ={};
                ll.num = i
                ll.name = cbDivs[i]._firstChild.innerHTML.split(':')[1].trim();
                layersToShow.push(ll);
                lx.push(i);
            }
        }
    }else{
        return;
    }
    //NEED TO CLOSE THE DIALOG
    await createComps(app.activeDocument, lx);

The problem is that if I run createComps() from the panel directly, providing the required variables, it runs fine but if I run it as show above, when the dialog is still open it has difficulties accessing the app.activeDocument elements.
I think I need to close the dialog before I run createComps() but I don’t know how to do this.
I tried replacing:
//NEED TO CLOSE THE DIALOG
with:
document.querySelector('#createCompsDialog').close('CLOSE');
bit this hangs Photoshop and the form does not close.

should I close the dialog or is there something I should specify when I open the dialog?
i open it with:
$("#cbMakeComps_cmu").click(async function () { await ExecuteAsModal(() => showCreateCompsDialog(cmu)); });
I run createComps() with
$("#btnCreateCompsDialog").click(async function () { await ExecuteAsModal(() => createCompsFromDialog()); });

async function showCreateCompsDialog(body = "body") {
    // document.querySelector("#dialogBodyComps").innerHTML = "Select the layers to always show.";
    var myDiv = document.getElementById("dialogBodyComps");
    myDiv.innerHTML="";
    for (var i = 0; i < app.activeDocument.layers.length; i++) {
        var div = document.createElement('div');
        var label = document.createElement('sp-checkbox');
        label.id = "id" + i;
        // label.htmlFor = "Layer "+ i + ":" + "name";
        label.appendChild(document.createTextNode("Layer " + i + "  :  " + app.activeDocument.layers[i].name));
        div.appendChild(label);
        myDiv.appendChild(div);
    }

    const res = await document.querySelector("#createCompsDialog").uxpShowModal({
        title: "Create Layer Comps",
        resize: "none", //horizontal, vertical, none, both
        size: {
            width: 400,
            height: 500
        }
    })
    console.log("Dialog closed with: ${res}")
    return res;
}
2

I want to add that in when following code runs, with the dialog open,
newGroup = await refDoc.createLayerGroup({name: "mockUp"});,
Even thou mockUp is created, newGroup=null.

image
image1306×926 77 KB

Running the same code from the plugin directly, newGroup=grouplayer.

3

Maybe this thread would help: Showing A Yes No Cancel Message Box - #6 by simonhenke

4

Thank but no, it does not help.
The current simple workaround for me is to add the last line in the snippet below.

        //todo change below if layers are not in sequence
            newGroup = await refDoc.createLayerGroup({
            name: "mockUp",
            fromLayers: refDoc.layers.slice(0, refDoc.layers.length - keep.length)
        });
        newGroup=refDoc.layers[0];

Still, I want to know why, when the dialog is open, the first assignment of newGroup is null.