From 2b35fb82fda3d3b7db1cc9f4db1f4969ccf8cfe0 Mon Sep 17 00:00:00 2001
From: Yusuf Musleh <yusuf.musleh@gmail.com>
Date: Tue, 12 Mar 2024 12:47:46 +0300
Subject: [PATCH] feat: Add Space/Enter keyboard functionality

---
 .../ContentTagsDropDownSelector.jsx           | 22 +++++++++++++------
 1 file changed, 15 insertions(+), 7 deletions(-)

diff --git a/src/content-tags-drawer/ContentTagsDropDownSelector.jsx b/src/content-tags-drawer/ContentTagsDropDownSelector.jsx
index d471593ed7..56fd2828fe 100644
--- a/src/content-tags-drawer/ContentTagsDropDownSelector.jsx
+++ b/src/content-tags-drawer/ContentTagsDropDownSelector.jsx
@@ -118,8 +118,8 @@ const ContentTagsDropDownSelector = ({
     setNumPages((x) => x + 1);
   }, []);
 
-  const handleKeyBoardNav = (e) => {
-    const keyPressed = e.key;
+  const handleKeyBoardNav = (e, hasChildren) => {
+    const keyPressed = e.code;
     const currentElement = e.target;
     const encapsulator = currentElement.closest('.dropdown-selector-tag-encapsulator');
 
@@ -130,14 +130,15 @@ const ContentTagsDropDownSelector = ({
     tagValue = tagValue ? decodeURIComponent(tagValue) : tagValue;
 
     if (keyPressed === 'ArrowRight') {
+      e.preventDefault();
       if (tagValue && !isOpen(tagValue)) {
         clickAndEnterHandler(tagValue);
       }
     } else if (keyPressed === 'ArrowLeft') {
+      e.preventDefault();
       if (tagValue && isOpen(tagValue)) {
         clickAndEnterHandler(tagValue);
       }
-      // TODO: Implement remaining cases when left key pressed
     } else if (keyPressed === 'ArrowUp') {
       const prevSubTags = encapsulator?.previousElementSibling?.querySelectorAll('.dropdown-selector-tag-actions');
       const prevSubTag = prevSubTags && prevSubTags[prevSubTags.length - 1];
@@ -153,7 +154,6 @@ const ContentTagsDropDownSelector = ({
         // Handles case of jumping out of subtags to previous parent tag
         const prevParentTagEncapsulator = encapsulator?.parentNode.closest('.dropdown-selector-tag-encapsulator');
         const prevParentTag = prevParentTagEncapsulator?.querySelector('.dropdown-selector-tag-actions');
-
         prevParentTag?.focus();
       }
     } else if (keyPressed === 'ArrowDown') {
@@ -185,9 +185,17 @@ const ContentTagsDropDownSelector = ({
         }
       }
     } else if (keyPressed === 'Enter') {
-      // TODO: Implement
+      e.preventDefault();
+      if (hasChildren && tagValue) {
+        clickAndEnterHandler(tagValue);
+      } else {
+        const checkbox = currentElement.querySelector('.taxonomy-tags-selectable-box');
+        checkbox.click();
+      }
     } else if (keyPressed === 'Space') {
-      // TODO: Implmenet
+      e.preventDefault();
+      const checkbox = currentElement.querySelector('.taxonomy-tags-selectable-box');
+      checkbox.click();
     }
   };
 
@@ -216,7 +224,7 @@ const ContentTagsDropDownSelector = ({
             <div
               className="d-flex dropdown-selector-tag-actions"
               tabIndex={i === 0 && level === 0 ? 0 : -1} // Only enable tab into top of dropdown to set focus
-              onKeyDown={handleKeyBoardNav}
+              onKeyDown={(e) => handleKeyBoardNav(e, tagData.childCount > 0)}
             >
               <SelectableBox
                 inputHidden={false}