From a63db09bff7953b0d489bf6cedee18f42986c2f2 Mon Sep 17 00:00:00 2001
From: saml33 <slam.uke@gmail.com>
Date: Thu, 2 Nov 2023 12:38:41 +1100
Subject: [PATCH] remove auto-focus search inputs on mobile

---
 components/swap/SwapFormTokenList.tsx     | 7 ++++---
 components/trade/MarketSelectDropdown.tsx | 6 ++++--
 2 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/components/swap/SwapFormTokenList.tsx b/components/swap/SwapFormTokenList.tsx
index 96610c77..69f3ae97 100644
--- a/components/swap/SwapFormTokenList.tsx
+++ b/components/swap/SwapFormTokenList.tsx
@@ -18,6 +18,7 @@ import { getInputTokenBalance } from './TriggerSwapForm'
 import { walletBalanceForToken } from '@components/DepositForm'
 import TokenReduceOnlyDesc from '@components/shared/TokenReduceOnlyDesc'
 import PopularSwapTokens from './PopularSwapTokens'
+import { useViewport } from 'hooks/useViewport'
 
 export type SwapFormTokenListType =
   | 'input'
@@ -174,6 +175,7 @@ const SwapFormTokenList = ({
   const { group } = useMangoGroup()
   const { mangoAccount, mangoAccountAddress } = useMangoAccount()
   const focusRef = useRef<HTMLInputElement>(null)
+  const { isDesktop } = useViewport()
 
   const handleTokenSelect = (mintAddress: string) => {
     onTokenSelect(mintAddress, onClose)
@@ -316,10 +318,10 @@ const SwapFormTokenList = ({
   const sortedTokens = search ? startSearch(tokenInfos, search) : tokenInfos
 
   useEffect(() => {
-    if (focusRef?.current) {
+    if (focusRef?.current && isDesktop) {
       focusRef.current.focus()
     }
-  }, [focusRef])
+  }, [focusRef, isDesktop])
 
   const listTitle = useMemo(() => {
     if (!type) return ''
@@ -355,7 +357,6 @@ const SwapFormTokenList = ({
           className="pl-10"
           type="text"
           placeholder="Search by token or paste address"
-          autoFocus
           value={search}
           onChange={handleUpdateSearch}
           ref={focusRef}
diff --git a/components/trade/MarketSelectDropdown.tsx b/components/trade/MarketSelectDropdown.tsx
index e6312d44..4b096c15 100644
--- a/components/trade/MarketSelectDropdown.tsx
+++ b/components/trade/MarketSelectDropdown.tsx
@@ -34,6 +34,7 @@ import {
 import Input from '@components/forms/Input'
 import { useSortableData } from 'hooks/useSortableData'
 import { SortableColumnHeader } from '@components/shared/TableElements'
+import { useViewport } from 'hooks/useViewport'
 
 const MARKET_LINK_CLASSES =
   'grid grid-cols-3 sm:grid-cols-4 flex items-center w-full py-2 px-4 rounded-r-md focus:outline-none focus-visible:text-th-active md:hover:cursor-pointer md:hover:bg-th-bkg-3 md:hover:text-th-fgd-1'
@@ -54,6 +55,7 @@ const MarketSelectDropdown = () => {
   const [spotBaseFilter, setSpotBaseFilter] = useState('All')
   const { perpMarketsWithData, serumMarketsWithData, isLoading, isFetching } =
     useListedMarketsWithMarketData()
+  const { isDesktop } = useViewport()
   const focusRef = useRef<HTMLInputElement>(null)
 
   const unsortedPerpMarketsToShow = useMemo(() => {
@@ -111,10 +113,10 @@ const MarketSelectDropdown = () => {
   } = useSortableData(unsortedSerumMarketsToShow)
 
   useEffect(() => {
-    if (focusRef?.current && spotOrPerp === 'spot') {
+    if (focusRef?.current && spotOrPerp === 'spot' && isDesktop && isOpen) {
       focusRef.current.focus()
     }
-  }, [focusRef, isOpen, spotOrPerp])
+  }, [focusRef, isDesktop, isOpen, spotOrPerp])
 
   const loadingMarketData = isLoading || isFetching