Add example of autofocus

pablonete · pablonete · commit a0168677e671 · 2021-07-20T17:53:09.000+02:00
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" placeholder="Autofocus wannabe filter" 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>
