Focus on first item in revealed dropdown

src/app/components/Dropdown.tsx

@@ -1,12 +1,12 @@
 
-import { HTMLElement } from '@openstax/types/lib.dom';
+import { HTMLElement, HTMLMenuElement } from '@openstax/types/lib.dom';
 import flow from 'lodash/fp/flow';
 import isUndefined from 'lodash/fp/isUndefined';
 import omitBy from 'lodash/fp/omitBy';
 import React, { ReactNode } from 'react';
 import { FormattedMessage, useIntl } from 'react-intl';
 import styled, { css, keyframes } from 'styled-components/macro';
-import { useFocusLost, useTrapTabNavigation } from '../reactUtils';
+import { useFocusLost, useTrapTabNavigation, focusableItemQuery } from '../reactUtils';
 import { useOnEsc } from '../reactUtils';
 import theme, { defaultFocusOutline } from '../theme';
 import { preventDefault } from '../utils';
@@ -167,10 +167,19 @@ const TabTransparentDropdown = styled((
 `;
 
 function TrappingDropdownList(props: object) {
-  const ref = React.useRef(null);
+  const ref = React.useRef<HTMLMenuElement>(null);
 
   useTrapTabNavigation(ref);
 
+  React.useEffect(
+    () => {
+      if (ref.current?.querySelector) {
+        ref.current?.querySelector<HTMLElement>(focusableItemQuery)?.focus();
+      }
+    },
+    []
+  );
+
   return (
     <menu ref={ref} {...props} />
   );

src/app/reactUtils.ts

@@ -22,7 +22,7 @@ function isHidden(el: HTMLElement) {
   return el.offsetWidth === 0 && el.offsetHeight === 0;
 }
 
-const focusableItemQuery = [
+export const focusableItemQuery = [
   'button', 'input', 'select', 'textarea', '[href]', '[tabindex]:not([tabindex="-1"]',
 ].map((s) => s.includes('[') ? s : `${s}:not([disabled])`).join(',');