chore(popup-menu): don't leak resultsRef

Scrolling into view can be handled within the <PopupMenuList />

lib/features/popup-menu/PopupMenuComponent.js

@@ -52,7 +52,6 @@ export default function PopupMenuComponent(props) {
   }, [ search, originalEntries ]);
 
   const inputRef = useRef();
-  const resultsRef = useRef();
 
   const [ value, setValue ] = useState('');
 
@@ -118,20 +117,6 @@ export default function PopupMenuComponent(props) {
     inputRef.current && inputRef.current.focus();
   }, []);
 
-  // scroll to keyboard selected result
-  useLayoutEffect(() => {
-    const containerEl = resultsRef.current;
-
-    if (!containerEl)
-      return;
-
-    const selectedEl = containerEl.querySelector('.selected');
-
-    if (selectedEl) {
-      scrollIntoView(selectedEl);
-    }
-  }, [ selectedEntry ]);
-
   // handle keyboard seleciton
   const keyboardSelect = direction => {
     const idx = entries.indexOf(selectedEntry);
@@ -227,7 +212,6 @@ export default function PopupMenuComponent(props) {
           selectedEntry=${ selectedEntry }
           setSelectedEntry=${ setSelectedEntry }
           onSelect=${ onSelect }
-          resultsRef=${ resultsRef }
         />
       </div>
       `}
@@ -284,16 +268,6 @@ function PopupMenuWrapper(props) {
 }
 
 // helpers //////////////////////
-function scrollIntoView(el) {
-  if (typeof el.scrollIntoViewIfNeeded === 'function') {
-    el.scrollIntoViewIfNeeded();
-  } else {
-    el.scrollIntoView({
-      scrollMode: 'if-needed',
-      block: 'nearest'
-    });
-  }
-}
 
 function getOverlayStyle(props) {
   return {

lib/features/popup-menu/PopupMenuList.js

@@ -1,6 +1,8 @@
 import {
   html,
-  useMemo
+  useMemo,
+  useLayoutEffect,
+  useRef
 } from '../../ui';
 
 import PopupMenuItem from './PopupMenuItem';
@@ -19,12 +21,27 @@ export default function PopupMenuList(props) {
     selectedEntry,
     setSelectedEntry,
     onSelect,
-    resultsRef,
     entries
   } = props;
 
+  const resultsRef = useRef();
+
   const groups = useMemo(() => groupEntries(entries), [ entries ]);
 
+  // scroll to selected result
+  useLayoutEffect(() => {
+    const containerEl = resultsRef.current;
+
+    if (!containerEl)
+      return;
+
+    const selectedEl = containerEl.querySelector('.selected');
+
+    if (selectedEl) {
+      scrollIntoView(selectedEl);
+    }
+  }, [ selectedEntry ]);
+
   return (html`
     <div class="results" ref=${ resultsRef }>
       ${ groups.map(group => html`
@@ -75,4 +92,17 @@ function groupEntries(entries) {
   });
 
   return groups;
+}
+
+// helpers ////////////////
+
+function scrollIntoView(el) {
+  if (typeof el.scrollIntoViewIfNeeded === 'function') {
+    el.scrollIntoViewIfNeeded();
+  } else {
+    el.scrollIntoView({
+      scrollMode: 'if-needed',
+      block: 'nearest'
+    });
+  }
 }