diff --git a/src/javascript/app/pages/trade/markets/markets-dropdown.jsx b/src/javascript/app/pages/trade/markets/markets-dropdown.jsx index 858db549b83..a16fec0af5e 100644 --- a/src/javascript/app/pages/trade/markets/markets-dropdown.jsx +++ b/src/javascript/app/pages/trade/markets/markets-dropdown.jsx @@ -209,6 +209,22 @@ export const MarketsDropdown = () => { closeMarketDropdown(); }; + useEffect(() => { + if (isMounted && itemsContainer.current) { + + const container = itemsContainer.current; + const selectedElement = container.querySelector('.market-item-selected'); + if (selectedElement) { + const offsetTop = selectedElement.offsetTop - container.offsetTop; + container.scrollTo({ + top : offsetTop, + behavior: 'auto', + }); + } + + } + }, [isMounted]); + return (
@@ -245,7 +261,7 @@ export const MarketsDropdown = () => { {Object.keys(markets).map((ik) => { const market = markets[ik]; const { submarkets } = market; - + const sortedSubmarketKeys = Object.keys(submarkets).sort((a, b) => { if (a === 'major_pairs') return -1; if (b === 'major_pairs') return 1; @@ -274,6 +290,7 @@ export const MarketsDropdown = () => { onClick={() => handleUnderlyingClick(yk)} label={display} selected={isSelected} + className={`${isSelected && 'market-item-selected'}`} size='md' /> );