Dismiss a modal onsubmit seems to have no effect

dialog

#1

Here https://adobexdplatform.com/plugin-docs/reference/ui/dialogs/dismissal.html or here: https://github.com/AdobeXD/plugin-docs/blob/4a75bee64f875e0a0f9b6e09869cd6c33c5c9d80/reference/ui/ui-concepts.md it says:

You can listen for the default gesture (typically [ENTER]) by registering for the submit event on the form :

function onsubmit() {
        dialog.close("ok");
    }
form.onsubmit = onsubmit;
//or
function onsubmit() {
    dialog.close(document.getElementById("name").value);
}
form.onsubmit = onsubmit;

But how to listen to a form.onsubmit exactly?
document.getElementById("myForm")
or
document.querySelector("form")
will return as null or undefined depending on where is at.

Here is all the code I have played with:

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 = "Hello World";
    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 = "cta";
    okButton.textContent = "OK";
    okButton.onclick = (e) => {
        dialog.close("i have hit ok button");
    }    
    footer.appendChild(okButton);
    let closeButton = document.createElement("button");
    closeButton.uxpVariant = "primary";
    closeButton.textContent = "Close";
    closeButton.onclick = (e) => dialog.close("I hit the close button. " + document.getElementById("myForm").value);
    footer.appendChild(closeButton);

    function onsubmit() {
        dialog.close("ok");
    }
    // form.onsubmit = onsubmit;
    form.onsubmit = function() {
        console.log('this form was submitted!')
    }
    console.log("FORM ID is: " + form.id + document.getElementById("myForm"));
}

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
    }
};