diff --git a/app/javascript/mastodon/components/form_fields/combobox_field.tsx b/app/javascript/mastodon/components/form_fields/combobox_field.tsx index a0e0a36f79..875b2421a3 100644 --- a/app/javascript/mastodon/components/form_fields/combobox_field.tsx +++ b/app/javascript/mastodon/components/form_fields/combobox_field.tsx @@ -3,6 +3,7 @@ import { forwardRef, useCallback, useContext, + useEffect, useId, useMemo, useRef, @@ -276,12 +277,6 @@ const ComboboxWithRef = ( setShouldMenuOpen(false); }, []); - const resetHighlight = useCallback(() => { - const firstItem = flatItems[0]; - const firstItemId = firstItem ? getItemId(firstItem) : null; - setHighlightedItemId(firstItemId); - }, [getItemId, flatItems]); - const highlightItem = useCallback((id: string | null) => { setHighlightedItemId(id); if (id) { @@ -294,6 +289,19 @@ const ComboboxWithRef = ( } }, []); + const resetHighlight = useCallback(() => { + const firstItem = flatItems[0]; + const firstItemId = firstItem ? getItemId(firstItem) : null; + highlightItem(firstItemId); + }, [flatItems, getItemId, highlightItem]); + + // Reset scroll & highlight when menu items change + useEffect(() => { + if (flatItems.length) { + resetHighlight(); + } + }, [flatItems, resetHighlight]); + const handleFocus: React.FocusEventHandler = useCallback( (e) => { if (openOnFocus) {