Allow to open sublanguages with keyboard

Author: ACR1209

src/components/LanguageSelector.tsx

@@ -36,13 +36,15 @@ const LanguageSelector = () => {
   const handleSelect = (selected: LanguageType) => {
     setLanguage(selected);
     setIsOpen(false);
+    setOpenedLanguages([]);
   };
 
   const { focusedIndex, handleKeyDown, resetFocus, focusFirst } =
     useKeyboardNavigation({
       items: allLanguages,
       isOpen,
       openedLanguages,
+      toggleDropdown: (openedLang) => handleToggleSublanguage(openedLang),
       onSelect: handleSelect,
       onClose: () => setIsOpen(false),
     });
@@ -58,8 +60,12 @@ const LanguageSelector = () => {
     }, 0);
   };
 
-  const handleOpenedSublanguage = (open: boolean, openedLang: LanguageType) => {
-    if (open) {
+  const handleToggleSublanguage = (openedLang: LanguageType) => {
+    const isAlreadyOpened = openedLanguages.some(
+      (lang) => lang.name === openedLang.name
+    );
+
+    if (!isAlreadyOpened) {
       setOpenedLanguages((prev) => [...prev, openedLang]);
     } else {
       setOpenedLanguages((prev) =>
@@ -128,7 +134,8 @@ const LanguageSelector = () => {
                 afterSelect={() => {
                   setIsOpen(false);
                 }}
-                onDropdownChange={handleOpenedSublanguage}
+                opened={openedLanguages.includes(lang)}
+                onDropdownToggle={handleToggleSublanguage}
               />
             ) : (
               <li

src/components/SublanguageSelector.tsx

@@ -6,13 +6,15 @@ import { LanguageType } from "@types";
 type SubLanguageSelectorProps = {
   mainLanguage: LanguageType;
   afterSelect: () => void;
-  onDropdownChange: (open: boolean, openedLang: LanguageType) => void;
+  onDropdownToggle: (openedLang: LanguageType) => void;
+  opened: boolean;
 };
 
 const SubLanguageSelector = ({
   mainLanguage,
   afterSelect,
-  onDropdownChange,
+  onDropdownToggle,
+  opened,
 }: SubLanguageSelectorProps) => {
   const { language, setLanguage } = useAppContext();
   const [isOpen, setIsOpen] = useState(
@@ -24,13 +26,10 @@ const SubLanguageSelector = ({
   const handleSelect = (selected: LanguageType) => {
     setLanguage(selected);
     setIsOpen(false);
+    onDropdownToggle(mainLanguage);
     afterSelect();
   };
 
-  useEffect(() => {
-    onDropdownChange(isOpen, mainLanguage);
-  }, [mainLanguage, onDropdownChange, isOpen]);
-
   return (
     <>
       <li
@@ -61,7 +60,7 @@ const SubLanguageSelector = ({
         </label>
       </li>
 
-      {isOpen && (
+      {(opened || isOpen) && (
         <>
           {mainLanguage.subLanguages.map((subLanguage) => (
             <li

src/hooks/useKeyboardNavigation.ts

@@ -7,6 +7,7 @@ interface UseKeyboardNavigationProps {
   isOpen: boolean;
   onSelect: (item: LanguageType) => void;
   onClose: () => void;
+  toggleDropdown: (openedLang: LanguageType) => void;
   openedLanguages: LanguageType[];
 }
 
@@ -27,6 +28,7 @@ export const useKeyboardNavigation = ({
   openedLanguages,
   onSelect,
   onClose,
+  toggleDropdown,
 }: UseKeyboardNavigationProps) => {
   const [focusedIndex, setFocusedIndex] = useState<number>(-1);
 
@@ -46,6 +48,17 @@ export const useKeyboardNavigation = ({
           setFocusedIndex((prev) => (prev > 0 ? prev - 1 : items.length - 1));
           break;
         case "ArrowRight":
+          if (focusedIndex >= 0) {
+            const selectedItem = items.filter(
+              (item) =>
+                !item.mainLanguage ||
+                openedLanguages.includes(item.mainLanguage)
+            )[focusedIndex];
+
+            if (selectedItem.subLanguages.length > 0) {
+              toggleDropdown(selectedItem);
+            }
+          }
           break;
         case "Enter":
           if (focusedIndex >= 0) {