remove auto-focus search inputs on mobile
This commit is contained in:
parent
23dc2bb0f8
commit
a63db09bff
|
@ -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}
|
||||
|
|
|
@ -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
|
||||
|
||||
|
|
Loading…
Reference in New Issue