Scroll details menu into view when it opens off-screen

elenatanasoiu · web-flow · commit c97f61545745 · 2022-06-28T10:32:33.000Z
If the details menu button is at the bottom of the page. we don't
automatically scroll the page to show you the dropdown options.

While there is an `autofocus` attribute we can use, there are two
problems with it:
1. it only works with inputs
2. it doesn't scroll smoothly so the experience not as smooth when
you open the menu.

Let's use scrollIntoView and center on the details menu.
diff --git a/examples/index.html b/examples/index.html
@@ -85,6 +85,23 @@ <h1>Autofocus example</h1>
       </details-menu>
     </details>
 
+    <details>
+      <summary>Scroll into view radio group</summary>
+      <details-menu scrollIntoView>
+        <ul role="radiogroup">
+          <li role="radio">
+            <label><input type="radio" name="robot" value="Hubot">Hubot</label>
+          </li>
+          <li role="radio">
+            <label><input type="radio" name="robot" value="Bender">Bender</label>
+          </li>
+          <li role="radio">
+            <label><input type="radio" name="robot" value="BB-8">BB-8</label>
+          </li>
+        </ul>
+      </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
@@ -39,6 +39,7 @@ class DetailsMenuElement extends HTMLElement {
       fromEvent(details, 'keydown', e => keydown(details, this, e)),
       fromEvent(details, 'toggle', () => loadFragment(details, this), {once: true}),
       fromEvent(details, 'toggle', () => closeCurrentMenu(details)),
+      fromEvent(details, 'toggle', () => scrollIntoView(details)),
       this.preload
         ? fromEvent(details, 'mouseover', () => loadFragment(details, this), {once: true})
         : NullSubscription,
@@ -137,6 +138,23 @@ function autofocus(details: Element): boolean {
   }
 }
 
+// Scroll entire details menu into view, center on it.
+function scrollIntoView(details: Element): boolean {
+  if (!details.hasAttribute('open')) return false
+  const detailsMenu = details.querySelector<HTMLElement>('details-menu [scrollIntoView]')
+  if (detailsMenu) {
+    const innerMenu = detailsMenu.closest('[role="menu"], [role="radiogroup"]')
+    if (innerMenu) {
+      innerMenu.scrollIntoView({behavior: 'smooth', block: 'center'})
+    } else {
+      return false
+    }
+    return true
+  } else {
+    return false
+  }
+}
+
 // Focus first item unless an item is already focused.
 function focusFirstItem(details: Element) {
   const selected = document.activeElement
diff --git a/test/test.js b/test/test.js
@@ -629,6 +629,45 @@ describe('details-menu element', function () {
     })
   })
 
+  describe('with input[scrollIntoView]', function () {
+    beforeEach(function () {
+      const container = document.createElement('div')
+      container.innerHTML = `
+        <details>
+          <summary>Scroll into view radio group</summary>
+          <details-menu scrollIntoView>
+            <ul role="radiogroup">
+              <li role="radio">
+                <label><input type="radio" name="robot" value="Hubot">Hubot</label>
+              </li>
+              <li role="radio">
+                <label><input type="radio" name="robot" value="Bender">Bender</label>
+              </li>
+              <li role="radio">
+                <label><input type="radio" name="robot" value="BB-8">BB-8</label>
+              </li>
+            </ul>
+          </details-menu>
+        </details>
+      `
+      document.body.append(container)
+    })
+
+    afterEach(function () {
+      document.body.innerHTML = ''
+    })
+
+    it('scrolls the inner menu into view on mouse click', function () {
+      const details = document.querySelector('details')
+      const detailsMenu = details.querySelector('details-menu')
+      const innerMenu = detailsMenu.closest('[role="menu"]')
+
+      details.open = true
+      details.dispatchEvent(new CustomEvent('toggle'))
+      assert.equal(0, innerMenu.scrollTop)
+    })
+  })
+
   describe('closing the menu', function () {
     beforeEach(function () {
       const container = document.createElement('div')
