diff --git a/spotlight-client/src/UiLibrary/Dropdown/DropdownBase.tsx b/spotlight-client/src/UiLibrary/Dropdown/DropdownBase.tsx index 0947a472..3f63de86 100644 --- a/spotlight-client/src/UiLibrary/Dropdown/DropdownBase.tsx +++ b/spotlight-client/src/UiLibrary/Dropdown/DropdownBase.tsx @@ -86,6 +86,8 @@ const DropdownBase: React.FC< // helper for animation of menu opening and closing const [waitForCloseAnimation, setWaitForCloseAnimation] = useState(false); + const { selectedItem, ...passThruSelectProps } = selectProps; + const { closeMenu, isOpen, @@ -97,7 +99,11 @@ const DropdownBase: React.FC< } = useSelect({ items: options, onIsOpenChange: () => setWaitForCloseAnimation(true), - ...selectProps, + // passing null explicitly clears the selection; without it, + // Downshift maintains an internal selection state that we don't want. + // The dropdown is either fully controlled by an input prop or it is stateless + selectedItem: selectedItem || null, + ...passThruSelectProps, }); // animate button hover state