diff --git a/components/bank/components/sendBox.tsx b/components/bank/components/sendBox.tsx index 0b07d284..770daf36 100644 --- a/components/bank/components/sendBox.tsx +++ b/components/bank/components/sendBox.tsx @@ -72,7 +72,6 @@ export default function SendBox({ {activeTab === 'cross-chain' ? ( {}} ibcChains={ibcChains} selectedChain={selectedChain} setSelectedChain={setSelectedChain} diff --git a/components/bank/forms/ibcSendForm.tsx b/components/bank/forms/ibcSendForm.tsx index 465548e9..f4d3c0e8 100644 --- a/components/bank/forms/ibcSendForm.tsx +++ b/components/bank/forms/ibcSendForm.tsx @@ -1,4 +1,4 @@ -import React, { useState, useEffect, useMemo } from 'react'; +import React, { useState, useMemo } from 'react'; import { chainName } from '@/config'; import { useFeeEstimation, useTx } from '@/hooks'; import { ibc } from '@liftedinit/manifestjs'; @@ -14,7 +14,7 @@ import { IbcChain } from '../components/sendBox'; import Image from 'next/image'; import { shiftDigits, truncateString } from '@/utils'; import { SearchIcon } from '@/components/icons'; -import { MFX_TOKEN_DATA } from '@/utils/constants'; // Import MFX_TOKEN_DATA + import { TailwindModal } from '@/components/react/modal'; import { formatTokenDisplayName } from '@/utils'; @@ -27,7 +27,6 @@ export default function IbcSendForm({ refetchBalances, refetchHistory, isIbcTransfer, - setIsIbcTransfer, ibcChains, selectedChain, setSelectedChain, @@ -39,7 +38,6 @@ export default function IbcSendForm({ refetchBalances: () => void; refetchHistory: () => void; isIbcTransfer: boolean; - setIsIbcTransfer: (isIbcTransfer: boolean) => void; ibcChains: IbcChain[]; selectedChain: string; setSelectedChain: (selectedChain: string) => void; @@ -170,7 +168,7 @@ export default function IbcSendForm({ validateOnChange={true} validateOnBlur={true} > - {({ isValid, dirty, setFieldValue, values, errors, touched }) => ( + {({ isValid, dirty, setFieldValue, values, errors }) => (
@@ -215,11 +213,27 @@ export default function IbcSendForm({ {ibcChains.map(chain => (
  • setSelectedChain(chain.id)} + onClick={e => { + setSelectedChain(chain.id); + // Get the dropdown element and remove focus + const dropdown = (e.target as HTMLElement).closest('.dropdown'); + if (dropdown) { + (dropdown as HTMLElement).removeAttribute('open'); + (dropdown.querySelector('label') as HTMLElement)?.focus(); + (dropdown.querySelector('label') as HTMLElement)?.blur(); + } + }} onKeyDown={e => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); setSelectedChain(chain.id); + // Get the dropdown element and remove focus + const dropdown = (e.target as HTMLElement).closest('.dropdown'); + if (dropdown) { + (dropdown as HTMLElement).removeAttribute('open'); + (dropdown.querySelector('label') as HTMLElement)?.focus(); + (dropdown.querySelector('label') as HTMLElement)?.blur(); + } } }} tabIndex={0}