Merge pull request #71 from seanpdoyle/method-dialog-dismiss

Support `method="dialog"` dismissal

Author: keithamus

README.md

@@ -60,7 +60,8 @@ If the `preload` attribute is present, hovering over the `<details>` element wil
 `details-dialog-close` event is fired from `<details-dialog>` when a request to close the dialog is made from
 
 - pressing <kbd>escape</kbd>,
-- clicking on `summary, [data-close-dialog]`, or
+- submitting a `form[method="dialog"]`
+- clicking on `summary, form button[formmethod="dialog"], [data-close-dialog]`, or
 - `dialog.toggle(false)`
 
 This event bubbles, and can be canceled to keep the dialog open.

src/index.ts

@@ -7,6 +7,8 @@ type Disableable = HTMLButtonElement | HTMLInputElement | HTMLTextAreaElement |
 
 type Focusable = HTMLElement
 
+type SubmitEvent = Event & { submitter: Element | null }
+
 function autofocus(el: DetailsDialogElement): void {
   let autofocusElement = Array.from(el.querySelectorAll<HTMLElement>('[autofocus]')).filter(focusable)[0]
   if (!autofocusElement) {
@@ -197,6 +199,22 @@ class DetailsDialogElement extends HTMLElement {
         toggleDetails(details, false)
       }
     })
+    this.addEventListener('submit', function(event: Event) {
+      if (!(event.target instanceof HTMLFormElement)) return
+
+      const {target} = event
+      const submitEvent = 'submitter' in event ? event as SubmitEvent : null
+      const submitter = submitEvent?.submitter
+      const method = submitter?.getAttribute('formmethod') || target.getAttribute('method')
+
+      if (method == 'dialog') {
+        event.preventDefault()
+        const details = target.closest('details')
+        if (details) {
+          toggleDetails(details, false)
+        }
+      }
+    })
   }
 
   get src(): string | null {

test/test.js

@@ -31,6 +31,8 @@ describe('details-dialog-element', function() {
               <button hidden>hidden</button>
               <div hidden><button>hidden</button></div>
               <details><button>Button in closed details</button></details>
+              <form method="dialog"><button id="method-dialog">method=dialog</button></form>
+              <form><button id="formmethod-dialog" formmethod="dialog">formmethod=dialog</button></form>
               <button ${CLOSE_ATTR}>Goodbye</button>
             </details-dialog>
           </details>
@@ -96,6 +98,10 @@ describe('details-dialog-element', function() {
       triggerKeydownEvent(details, 'Tab')
       assert.equal(document.activeElement, document.querySelector(`[data-button]`))
       triggerKeydownEvent(details, 'Tab')
+      assert.equal(document.activeElement, document.querySelector(`form[method="dialog"] button`))
+      triggerKeydownEvent(details, 'Tab')
+      assert.equal(document.activeElement, document.querySelector(`[formmethod="dialog"]`))
+      triggerKeydownEvent(details, 'Tab')
       assert.equal(document.activeElement, document.querySelector(`[${CLOSE_ATTR}]`))
     })
 
@@ -199,6 +205,14 @@ describe('details-dialog-element', function() {
         assert(details.open)
         close.click()
         assert(!details.open)
+        dialog.toggle(true)
+        assert(details.open)
+        dialog.querySelector('#method-dialog').click()
+        assert(!details.open)
+        dialog.toggle(true)
+        assert(details.open)
+        dialog.querySelector('#formmethod-dialog').click()
+        assert(!details.open)
       })
 
       it('closes when escape key is pressed', async function() {