注释ui.alert行后模态对话框提交无法正常关闭问题求助

• 核心诱因是表单默认提交行为和google.script.run异步逻辑缺少回调共同导致的：
  1. 你使用了type="submit"的按钮，点击后除了触发自定义的submitForm逻辑，还会触发表单默认提交行为，重载整个对话框页面
  2. 未注释ui.alert时，服务端的弹窗会阻塞服务端代码执行，较长的执行时间刚好错开了页面重载的时机，你写的隐藏表单逻辑可以生效；注释ui.alert后服务端函数执行速度极快，页面快速重载，隐藏表单的代码还未生效就被刷新，表单重新渲染出来，看起来就像对话框卡住无法关闭
  3. 现有逻辑仅隐藏了表单DOM，没有主动调用关闭对话框的API，就算没有重载问题，也只是看不到表单，对话框本身还会存在

第一步：修改前端index.htm的提交逻辑 #

把原有submitForm函数替换为如下代码，阻止默认提交、增加服务端执行成功的回调主动关闭对话框：

function submitForm(e) {
  // 阻止表单默认提交的页面重载行为
  e.preventDefault();
  google.script.run
    .withSuccessHandler(function() {
      // 服务端逻辑执行完成后主动关闭整个模态框
      google.script.host.close();
    })
    .getStartFromDialog(document.getElementById("startChoiceForm"));
  document.getElementById("form").style.display = "none";
}

第二步：修改表单绑定逻辑 #

把原有<form>标签增加onsubmit绑定，同时去掉提交按钮的onclick属性即可，其余代码保持不变：

<form id="startChoiceForm" onsubmit="submitForm(event)">
<!-- 下拉框代码保持不变 -->
<div>
  <input type="submit" value="Submit" class="action" >
  <input type="button" value="Close" onclick="google.script.host.close()" >
</div> 
</form>

修改完成后无论是否保留调试用的ui.alert代码，对话框都会在提交后正常关闭。

内容的提问来源于stack exchange，提问作者Atiq Zabinski