Creating modal dialogs is so hard

Adobe XD UXP Plugin API
,
25

thanks @kerrishotts for this thoroughly explanation but the onsubmit when pressing enter seems to never fire up.

This is my problem, not the dialog.close() per se. This and returning previous form input value from previous utilisation of the plugin, which I don’t know how it’s made yet.

Other than these 2 points I pretty much I understand how the system of dialogs work :slight_smile:

Like in the code below, I never get console.log(“FORM SUBMITTED”) in the console if the two button do nothing (just preventDefault in this example):

let dialog;
//  lazy load the dialog
function getDialog() {
if (dialog == null) {
    //  create the dialog
    dialog = document.createElement("dialog");

     //  create the form element
    //  the form element has default styling and spacing
    let form = document.createElement("form");
    dialog.appendChild(form);
    //  don't forget to set your desired width
    form.style.width = 200;
    form.id= "myForm";

    //  add your content
    let hello = document.createElement("h1");
    hello.textContent = "Let's see if onsubmit works!";
    form.appendChild(hello);

    //  create a footer to hold your form submit and cancel buttons
    let footer = document.createElement("footer");
    form.appendChild(footer)
    // include at least one way to close the dialog

    let okButton = document.createElement("button");
    okButton.uxpVariant = "warning";
    okButton.textContent = "OK";
    // okButton.onclick = (e) => {
    //     dialog.close("i have hit ok button");
    // }    
    okButton.onclick = (e) => e.preventDefault();
    footer.appendChild(okButton);

    let closeButton = document.createElement("button");
    closeButton.uxpVariant = "primary";
    closeButton.textContent = "Close";
    // closeButton.onclick = (e) => dialog.close("I hit the close button.");
    closeButton.onclick = (e) => e.preventDefault();
    footer.appendChild(closeButton);

    form.onsubmit = function(e) {
        e.preventDefault();
        // dialog.close("ok");
        console.log("FORM SUBMITTED!") // < - - - - - - IN NEVER GET THIS MESSAGE!
    }
    
}
return dialog;
}


function menuCommand(selection) {
    // console.log(selection.items[0].name);
    //  attach the dialog to the body and show it
    document.body.appendChild(getDialog()).showModal()
    .then(result => {
        // handle dialog result
        // if canceled by ESC, will be "reasonCanceled"
        console.log("The form is " + document.getElementById("myForm").value);
        console.log('Promise received: ' + result);
    });    
    
}

//  this file is deliberately written in low level document.appendChild format.
module.exports = {
    commands: {
        menuCommand
    }
};