diff --git a/src/components/FindWalletProductTable/FindWalletLanguageSelectInput.tsx b/src/components/FindWalletProductTable/FindWalletLanguageSelectInput.tsx index 4bbea017e44..cb9378cf246 100644 --- a/src/components/FindWalletProductTable/FindWalletLanguageSelectInput.tsx +++ b/src/components/FindWalletProductTable/FindWalletLanguageSelectInput.tsx @@ -1,7 +1,9 @@ +import { useEffect, useRef, useState } from "react" import { useLocale } from "next-intl" import { FilterInputState, Lang } from "@/lib/types" +import Input from "@/components/ui/input" import { Select, SelectContent, @@ -34,15 +36,31 @@ const FindWalletLanguageSelectInput = ({ updateFilterState, }: FindWalletLanguageSelectInputProps) => { const locale = useLocale() + const [searchQuery, setSearchQuery] = useState("") + const [isSelectOpen, setIsSelectOpen] = useState(false) + const searchInputRef = useRef(null) const { t } = useTranslation("page-wallets-find-wallet") const languageCountWalletsData = getLanguageCountWalletsData(locale as string) - const countSortedLanguagesCount = languageCountWalletsData.sort( + const countSortedLanguagesCount = [...languageCountWalletsData].sort( (a, b) => b.count - a.count ) + useEffect(() => { + if (isSelectOpen) { + //Delay focus to ensure input is rendered + const frame = requestAnimationFrame(() => { + searchInputRef.current?.focus() + }) + + return () => clearTimeout(frame) + } + }, [isSelectOpen]) + return (
setSearchQuery(e.target.value)} + onKeyDown={(e) => { + if (e.key !== "Enter") return + + const selectedLanguage = languageCountWalletsData.find((lang) => + lang.name.toLowerCase().includes(searchQuery.toLowerCase()) + ) + if (!selectedLanguage) return + + trackCustomEvent({ + eventCategory: "WalletFilterSidebar", + eventAction: "Language search", + eventName: selectedLanguage.name, + }) + updateFilterState( + filterIndex, + itemIndex, + selectedLanguage.langCode + ) + setIsSelectOpen(false) + setSearchQuery("") + }} + className="w-full" + /> +
{languageCountWalletsData.map((language) => { + const isVisible = language.name + .toLowerCase() + .includes(searchQuery.toLowerCase()) return ( - + {`${language.name} (${language.count})`} ) diff --git a/src/intl/en/page-wallets-find-wallet.json b/src/intl/en/page-wallets-find-wallet.json index 4378df2d750..62d48f4cdbd 100644 --- a/src/intl/en/page-wallets-find-wallet.json +++ b/src/intl/en/page-wallets-find-wallet.json @@ -84,5 +84,6 @@ "page-find-wallet-social-links": "Links", "page-find-wallet-empty-results-title": "No results", "page-find-wallet-empty-results-desc": "There are no wallets matching your criteria, try removing some filters.", - "page-find-wallet-see-wallets": "See wallets" + "page-find-wallet-see-wallets": "See wallets", + "page-find-wallet-search-languages": "Search languages..." }