fix: fixed scroll to selected element

deriv-com · Jul 17, 2024 · 13de187 · 13de187
1 parent 378b76e
commit 13de187
Showing 1 changed file with 18 additions and 1 deletion.
diff --git 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 (
         <div className='quill-market-dropdown-container'>
             <div className='quill-market-dropdown-search-container'>
@@ -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'
                                                     />
                                                 );