Web:Client:Components:Dialogs:CreateEditRoomDialog:Sub-Components:TagInput Add the ability to work with the keyboard

packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/Params/InputParam.js

@@ -32,6 +32,7 @@ const InputParam = React.forwardRef(
       errorMessage,
       isAutoFocussed,
       onKeyUp,
+      onKeyDown,
     },
     ref
   ) => {
@@ -65,6 +66,7 @@ const InputParam = React.forwardRef(
             hasError={!isValidTitle}
             isAutoFocussed={isAutoFocussed}
             onKeyUp={onKeyUp}
+            onKeyDown={onKeyDown}
           />
         </FieldContainer>
       </StyledInputParam>

packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/TagInput/TagDropdown.js

@@ -119,7 +119,6 @@ const TagDropdown = ({
         hasItems={!!dropdownItems.length}
         clickOutsideAction={onClickOutside}
         withBackdrop={false}
-        enableKeyboardEvents={false}
       >
         {dropdownItems}
       </StyledDropDown>

packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/TagInput/index.js

@@ -61,6 +61,17 @@ const TagInput = ({ t, tagHandler, setIsScrollLocked, isDisabled }) => {
     setIsDropdownOpen(false);
   };
 
+  const handleKeyDown = (event) => {
+    const keyCode = event.code;
+
+    const isAcceptableEvents =
+      keyCode === "ArrowUp" || keyCode === "ArrowDown" || keyCode === "Enter";
+
+    if (isAcceptableEvents && isDropdownOpen) return;
+
+    event.stopPropagation();
+  };
+
   return (
     <StyledTagInput
       className="set_room_params-input set_room_params-tag_input"
@@ -76,6 +87,7 @@ const TagInput = ({ t, tagHandler, setIsScrollLocked, isDisabled }) => {
         onBlur={closeDropdown}
         onFocus={handleFocus}
         isDisabled={isDisabled}
+        onKeyDown={handleKeyDown}
       />
 
       <TagDropdown

packages/components/drop-down/VirtualList.tsx

@@ -69,7 +69,7 @@ function VirtualList({
         ref.current.scrollToItem(activeIndex, "smart");
       }
     };
-  }, [isOpen, activeIndex, maxHeight, enableKeyboardEvents]);
+  }, [isOpen, activeIndex, maxHeight, enableKeyboardEvents, children]);
 
   const onKeyDown = useCallback(
     (event: KeyboardEvent) => {
@@ -99,7 +99,7 @@ function VirtualList({
       currentIndexRef.current = index;
       ref.current.scrollToItem(index, "smart");
     },
-    [isOpen]
+    [isOpen, children]
   );
 
   const handleMouseMove = useCallback((index: number) => {