From f2e85ba0a37535f5af925c776a4b763841b12874 Mon Sep 17 00:00:00 2001
From: meenakshi-deriv <104189801+meenakshi-deriv@users.noreply.github.com>
Date: Thu, 18 Jul 2024 09:45:53 +0400
Subject: [PATCH] Meenu market scroll section (#679)

* fix: updated dropdown size and added default value

* empty: empty commit

* fix: fixed sorting issue

* fix: fixed scroll upward issue

* fix: fixed scroll to selected element

* fix: updated classname

* fix: removed upward scroll fixes
---
 .../pages/trade/markets/markets-dropdown.jsx  | 19 ++++++++++++++++++-
 1 file changed, 18 insertions(+), 1 deletion(-)

diff --git a/src/javascript/app/pages/trade/markets/markets-dropdown.jsx b/src/javascript/app/pages/trade/markets/markets-dropdown.jsx
index b3ff4208c4c..bf5a474769b 100644
--- a/src/javascript/app/pages/trade/markets/markets-dropdown.jsx
+++ b/src/javascript/app/pages/trade/markets/markets-dropdown.jsx
@@ -208,6 +208,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'>
@@ -244,7 +260,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;
@@ -273,6 +289,7 @@ export const MarketsDropdown = () => {
                                                         onClick={() => handleUnderlyingClick(yk)}
                                                         label={display}
                                                         selected={isSelected}
+                                                        className={isSelected && 'market-item-selected'}
                                                         size='md'
                                                     />
                                                 );