diff --git a/client/components/Dropdown.jsx b/client/components/Dropdown.jsx
index 7f51284179..c04f961d75 100644
--- a/client/components/Dropdown.jsx
+++ b/client/components/Dropdown.jsx
@@ -4,7 +4,7 @@ import styled from 'styled-components';
import { remSize, prop } from '../theme';
import IconButton from '../common/IconButton';
-const DropdownWrapper = styled.ul`
+export const DropdownWrapper = styled.ul`
background-color: ${prop('Modal.background')};
border: 1px solid ${prop('Modal.border')};
box-shadow: 0 0 18px 0 ${prop('shadowColor')};
@@ -52,6 +52,7 @@ const DropdownWrapper = styled.ul`
& button span,
& a {
padding: ${remSize(8)} ${remSize(16)};
+ font-size: ${remSize(12)};
}
* {
diff --git a/client/components/Dropdown/DropdownMenu.jsx b/client/components/Dropdown/DropdownMenu.jsx
new file mode 100644
index 0000000000..da41b30101
--- /dev/null
+++ b/client/components/Dropdown/DropdownMenu.jsx
@@ -0,0 +1,96 @@
+import PropTypes from 'prop-types';
+import React, { forwardRef, useCallback, useRef, useState } from 'react';
+import useModalClose from '../../common/useModalClose';
+import DownArrowIcon from '../../images/down-filled-triangle.svg';
+import { DropdownWrapper } from '../Dropdown';
+
+// TODO: enable arrow keys to navigate options from list
+
+const DropdownMenu = forwardRef(
+ (
+ { children, anchor, 'aria-label': ariaLabel, align, className, classes },
+ ref
+ ) => {
+ // Note: need to use a ref instead of a state to avoid stale closures.
+ const focusedRef = useRef(false);
+
+ const [isOpen, setIsOpen] = useState(false);
+
+ const close = useCallback(() => setIsOpen(false), [setIsOpen]);
+
+ const anchorRef = useModalClose(close, ref);
+
+ const toggle = useCallback(() => {
+ setIsOpen((prevState) => !prevState);
+ }, [setIsOpen]);
+
+ const handleFocus = () => {
+ focusedRef.current = true;
+ };
+
+ const handleBlur = () => {
+ focusedRef.current = false;
+ setTimeout(() => {
+ if (!focusedRef.current) {
+ close();
+ }
+ }, 200);
+ };
+
+ return (
+
+
+ {isOpen && (
+ {
+ setTimeout(close, 0);
+ }}
+ onBlur={handleBlur}
+ onFocus={handleFocus}
+ >
+ {children}
+
+ )}
+
+ );
+ }
+);
+
+DropdownMenu.propTypes = {
+ /**
+ * Provide