Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: ibc chain dropdown closes on selection #75

Merged
merged 1 commit into from
Nov 26, 2024
Merged

fix: ibc chain dropdown closes on selection #75

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 0 additions & 1 deletion components/bank/components/sendBox.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -72,7 +72,6 @@ export default function SendBox({
{activeTab === 'cross-chain' ? (
<IbcSendForm
isIbcTransfer={true}
setIsIbcTransfer={() => {}}
ibcChains={ibcChains}
selectedChain={selectedChain}
setSelectedChain={setSelectedChain}
Expand Down
26 changes: 20 additions & 6 deletions components/bank/forms/ibcSendForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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';

Expand All @@ -27,7 +27,6 @@ export default function IbcSendForm({
refetchBalances,
refetchHistory,
isIbcTransfer,
setIsIbcTransfer,
ibcChains,
selectedChain,
setSelectedChain,
Expand All @@ -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;
Expand Down Expand Up @@ -170,7 +168,7 @@ export default function IbcSendForm({
validateOnChange={true}
validateOnBlur={true}
>
{({ isValid, dirty, setFieldValue, values, errors, touched }) => (
{({ isValid, dirty, setFieldValue, values, errors }) => (
<Form className="space-y-6 flex flex-col items-center max-w-md mx-auto">
<div className="w-full space-y-4">
<div className={`dropdown dropdown-end w-full ${isIbcTransfer ? 'block' : 'hidden'}`}>
Expand Down Expand Up @@ -215,11 +213,27 @@ export default function IbcSendForm({
{ibcChains.map(chain => (
<li key={chain.id} role="option" aria-selected={selectedChain === chain.id}>
<a
onClick={() => 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();
}
Comment on lines +216 to +236
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Improve dropdown accessibility and code maintainability

While the changes fix the dropdown closure issue, there are some improvements we can make:

  1. Replace direct DOM manipulation with React refs
  2. Update ARIA attributes for better accessibility
  3. Extract duplicate logic to a shared function

Here's the suggested implementation:

+ const dropdownRef = useRef<HTMLDivElement>(null);
+ const labelRef = useRef<HTMLLabelElement>(null);
+
+ const handleChainSelection = (chain: IbcChain) => {
+   setSelectedChain(chain.id);
+   if (dropdownRef.current) {
+     dropdownRef.current.removeAttribute('open');
+     labelRef.current?.focus();
+     labelRef.current?.blur();
+   }
+ };

  <div 
+   ref={dropdownRef}
    className="dropdown dropdown-end w-full">
    <label
+     ref={labelRef}
      tabIndex={0}
      aria-label="chain-selector"
      role="combobox"
-     aria-expanded="false"
+     aria-expanded={dropdownRef.current?.hasAttribute('open') || false}
      aria-controls="chain-dropdown"
      aria-haspopup="listbox"
      className="btn btn-md btn-dropdown w-full">

    <a
-     onClick={e => {
-       setSelectedChain(chain.id);
-       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();
-       }
-     }}
+     onClick={() => handleChainSelection(chain)}
      onKeyDown={e => {
        if (e.key === 'Enter' || e.key === ' ') {
          e.preventDefault();
-         setSelectedChain(chain.id);
-         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();
-         }
+         handleChainSelection(chain);
        }
      }}

Committable suggestion skipped: line range outside the PR's diff.

}
}}
tabIndex={0}
Expand Down