Merge pull request #51 from pablonete/autofocus-fix

koddsson · web-flow · commit 202237d33c01 · 2021-07-21T10:51:43.000+01:00
Autofocus fix
diff --git a/examples/index.html b/examples/index.html
@@ -24,6 +24,8 @@
   </style>
 </head>
 <body>
+  <h1>Base examples</h1>
+
   <details>
     <summary>Best robot: <span data-menu-button>Unknown</span></summary>
     <details-menu>
@@ -60,6 +62,20 @@
     </details-menu>
   </details>
 
+  <h1>Autofocus example</h1>
+  <p><code>summary</code> may have <code>autofocus</code> so it's the initially focused element in the page.</p>
+  <p>Then any focusable element inside the popup can declare autofocus too, so it gets focus when the popup is opened.</p>
+
+  <details>
+    <summary data-menu-button autofocus>Autofocus picker</summary>
+    <details-menu>
+      <input type="text" autofocus />
+      <button type="submit" name="robot" value="Hubot" role="menuitemradio" data-menu-button-text>Hubot</button>
+      <button type="submit" name="robot" value="Bender" role="menuitemradio" data-menu-button-text>Bender</button>
+      <button type="submit" name="robot" value="BB-8" role="menuitemradio" data-menu-button-text>BB-8</button>
+    </details-menu>
+  </details>
+
   <script type="text/javascript">
     document.addEventListener('details-menu-selected', e => console.log(e))
   </script>
diff --git a/src/index.ts b/src/index.ts
@@ -132,7 +132,7 @@ function closeCurrentMenu(details: Element) {
 
 function autofocus(details: Element): boolean {
   if (!details.hasAttribute('open')) return false
-  const input = details.querySelector<HTMLElement>('[autofocus]')
+  const input = details.querySelector<HTMLElement>('details-menu [autofocus]')
   if (input) {
     input.focus()
     return true
diff --git a/test/test.js b/test/test.js
@@ -601,6 +601,22 @@ describe('details-menu element', function () {
 
       assert.equal(input, document.activeElement, 'toggle open focuses on [autofocus]')
     })
+
+    it('summary autofocus should not impact with inner autofocus element', function () {
+      const details = document.querySelector('details')
+      const summary = details.querySelector('summary')
+      const input = details.querySelector('input')
+
+      // Summary is the initial element of the entire page, while input is the initial element in the popup
+      summary.setAttribute('autofocus', '')
+
+      summary.focus()
+      details.open = true
+      summary.dispatchEvent(new KeyboardEvent('keydown', {key: 'Enter', bubbles: true}))
+      details.dispatchEvent(new CustomEvent('toggle'))
+
+      assert.equal(document.activeElement, input, 'toggle open focuses on [autofocus]')
+    })
   })
 
   describe('closing the menu', function () {
