Submit and close `confirm` prompt on enter

.prettierrc

@@ -1,4 +1,5 @@
 {
+  "singleQuote": true,
   "printWidth": 120,
   "quoteProps": "preserve",
   "spaceBeforeFunctionParen": true,

src/plugins/modal/confirm.js

@@ -1,5 +1,5 @@
 import { getOpenPromise } from '@converse/openpromise';
-import { api } from '@converse/headless';
+import { api, constants } from '@converse/headless';
 import BaseModal from 'plugins/modal/modal.js';
 import tplPrompt from './templates/prompt.js';
 
@@ -21,6 +21,24 @@ export default class Confirm extends BaseModal {
             },
             false
         );
+
+        this.onKeyDown = /** @param {KeyboardEvent} ev */ (ev) => {
+            if (ev.key === constants.KEYCODES.ESCAPE) {
+                ev.preventDefault();
+                ev.stopPropagation();
+                /** @type {HTMLFormElement} */(this.querySelector('form.confirm')).submit();
+            }
+        };
+    }
+
+    connectedCallback() {
+        super.connectedCallback();
+        this.addEventListener('keydown', this.onKeyDown);
+    }
+
+    disconnectedCallback() {
+        this.removeEventListener('keydown', this.onKeyDown);
+        super.disconnectedCallback();
     }
 
     renderModal() {
@@ -31,13 +49,21 @@ export default class Confirm extends BaseModal {
         return this.model.get('title');
     }
 
+    renderModalFooter() {
+        return '';
+    }
+
+    /**
+     * @param {SubmitEvent} ev
+     */
     onConfimation(ev) {
         ev.preventDefault();
-        const form_data = new FormData(ev.target);
+        const form = /** @type {HTMLFormElement} */ (ev.target);
+        const form_data = new FormData(form);
         const fields = (this.model.get('fields') || []).map(
             /** @param {import('./types.js').Field} field */ (field) => {
                 const value = form_data.get(field.name);
-                field.value = /** @type {string} */(value);
+                field.value = /** @type {string} */ (value);
                 if (field.challenge) {
                     field.challenge_failed = value !== field.challenge;
                 }
@@ -54,10 +80,6 @@ export default class Confirm extends BaseModal {
         this.confirmation.resolve(fields);
         this.modal.hide();
     }
-
-    renderModalFooter() {
-        return '';
-    }
 }
 
 api.elements.define('converse-confirm-modal', Confirm);

src/plugins/modal/templates/prompt.js

@@ -30,7 +30,7 @@ function tplField(f) {
  * @param {import('../confirm').default} el
  */
 export default (el) => {
-    return html` <form
+    return html`<form
         class="converse-form converse-form--modal confirm"
         action="#"
         @submit=${(ev) => el.onConfimation(ev)}

src/types/plugins/modal/confirm.d.ts

@@ -7,10 +7,15 @@ export default class Confirm extends BaseModal {
         resolve: (value: any) => void;
         reject: (reason?: any) => void;
     };
+    onKeyDown: (ev: KeyboardEvent) => void;
+    connectedCallback(): void;
     renderModal(): import("lit-html").TemplateResult<1>;
     getModalTitle(): any;
-    onConfimation(ev: any): void;
     renderModalFooter(): string;
+    /**
+     * @param {SubmitEvent} ev
+     */
+    onConfimation(ev: SubmitEvent): void;
 }
 import BaseModal from 'plugins/modal/modal.js';
 //# sourceMappingURL=confirm.d.ts.map

src/types/plugins/muc-views/chatarea.d.ts

@@ -15,9 +15,12 @@ export default class MUCChatArea extends CustomElement {
     split: any;
     initialize(): Promise<void>;
     model: any;
+    hideSidebarIfSmallViewport: (...args: any[]) => void;
     render(): "" | import("lit-html").TemplateResult<1>;
+    connectedCallback(): void;
     shouldShowSidebar(): boolean;
     getHelpMessages(): string[];
+    #private;
 }
 import { CustomElement } from 'shared/components/element.js';
 //# sourceMappingURL=chatarea.d.ts.map