diff --git a/apps/contract-verification/src/app/components/SearchableChainDropdown.tsx b/apps/contract-verification/src/app/components/SearchableChainDropdown.tsx index c6f78c5f2f..eec16f8845 100644 --- a/apps/contract-verification/src/app/components/SearchableChainDropdown.tsx +++ b/apps/contract-verification/src/app/components/SearchableChainDropdown.tsx @@ -37,7 +37,6 @@ export const SearchableChainDropdown: React.FC = ({ label, id, se const [searchTerm, setSearchTerm] = useState(selectedChain ? getChainDescriptor(selectedChain) : '') const [isOpen, setIsOpen] = useState(false) - const [filteredOptions, setFilteredOptions] = useState(dropdownChains) const dropdownRef = useRef(null) const fuse = new Fuse(dropdownChains, { @@ -45,14 +44,7 @@ export const SearchableChainDropdown: React.FC = ({ label, id, se threshold: 0.3, }) - useEffect(() => { - if (searchTerm === '') { - setFilteredOptions(dropdownChains) - } else { - const result = fuse.search(searchTerm) - setFilteredOptions(result.map(({ item }) => item)) - } - }, [searchTerm, dropdownChains]) + const filteredOptions = searchTerm ? fuse.search(searchTerm).map(({ item }) => item) : dropdownChains // Close dropdown when user clicks outside useEffect(() => { @@ -99,15 +91,13 @@ export const SearchableChainDropdown: React.FC = ({ label, id, se {/* Add ref here */} - {isOpen && ( -
    - {filteredOptions.map((chain) => ( -
  • handleOptionClick(chain)} className={`dropdown-item text-dark ${selectedChain?.chainId === chain.chainId ? 'active' : ''}`} style={{ cursor: 'pointer', whiteSpace: 'normal' }}> - {getChainDescriptor(chain)} -
  • - ))} -
- )} +
    + {filteredOptions.map((chain) => ( +
  • handleOptionClick(chain)} className={`dropdown-item text-dark ${selectedChain?.chainId === chain.chainId ? 'active' : ''}`} style={{ cursor: 'pointer', whiteSpace: 'normal' }}> + {getChainDescriptor(chain)} +
  • + ))} +
) }