Web: Client: CreateEditRoomDialog: Added ref to InputParam

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

@@ -17,52 +17,58 @@ const StyledInputParam = styled(StyledParam)`
   }
 `;
 
-const InputParam = ({
-  id,
-  title,
-  placeholder,
-  value,
-  onChange,
-  onFocus,
-  onBlur,
-  isDisabled,
-  isValidTitle,
-  errorMessage,
-  isAutoFocussed,
-}) => {
-  return (
-    <StyledInputParam>
-      <Label
-        title={title}
-        className="input-label"
-        display="display"
-        htmlFor={id}
-        text={title}
-      />
-
-      <FieldContainer
-        isVertical={true}
-        labelVisible={false}
-        hasError={!isValidTitle}
-        errorMessage={errorMessage}
-      >
-        <TextInput
-          id={id}
-          value={value}
-          onChange={onChange}
-          onFocus={onFocus}
-          onBlur={onBlur}
-          scale
-          placeholder={placeholder}
-          tabIndex={2}
-          isDisabled={isDisabled}
-          hasError={!isValidTitle}
-          isAutoFocussed={isAutoFocussed}
+const InputParam = React.forwardRef(
+  (
+    {
+      id,
+      title,
+      placeholder,
+      value,
+      onChange,
+      onFocus,
+      onBlur,
+      isDisabled,
+      isValidTitle,
+      errorMessage,
+      isAutoFocussed,
+    },
+    ref
+  ) => {
+    return (
+      <StyledInputParam>
+        <Label
+          title={title}
+          className="input-label"
+          display="display"
+          htmlFor={id}
+          text={title}
         />
-      </FieldContainer>
-    </StyledInputParam>
-  );
-};
+
+        <FieldContainer
+          isVertical={true}
+          labelVisible={false}
+          hasError={!isValidTitle}
+          errorMessage={errorMessage}
+        >
+          <TextInput
+            forwardedRef={ref}
+            id={id}
+            value={value}
+            onChange={onChange}
+            onFocus={onFocus}
+            onBlur={onBlur}
+            scale
+            placeholder={placeholder}
+            tabIndex={2}
+            isDisabled={isDisabled}
+            hasError={!isValidTitle}
+            isAutoFocussed={isAutoFocussed}
+          />
+        </FieldContainer>
+      </StyledInputParam>
+    );
+  }
+);
 
 InputParam.defaultProps = {
   isValidTitle: true,

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

@@ -13,21 +13,20 @@ const TagDropdown = ({
   setTagInputValue,
   createTagLabel,
   isDisabled,
+  inputRef,
 }) => {
   const dropdownRef = useRef(null);
 
   const [dropdownMaxHeight, setDropdownMaxHeight] = useState(0);
 
-  useEffect(() => {
-    document
-      .getElementById("shared_tags-input")
-      .addEventListener("keyup", onKeyPress);
-
-    return () => document.removeEventListener("keyup", onKeyPress);
-  });
-
   const onKeyPress = (e) => e.key === "Enter" && addNewTag();
 
+  useEffect(() => {
+    inputRef?.current?.addEventListener("keyup", onKeyPress);
+
+    return () => inputRef?.current?.removeEventListener("keyup", onKeyPress);
+  }, [onKeyPress]);
+
   const chosenTags = tagHandler.tags.map((tag) => tag.name);
 
   const tagsForDropdown = tagHandler.fetchedTags.filter(
@@ -41,12 +40,13 @@ const TagDropdown = ({
   };
 
   const onClickOutside = (e) => {
-    if (!e) return;
-    if (e.target.id === "shared_tags-input") return;
-    document.getElementById("shared_tags-input").blur();
+    /*     if (!e) return;
+    if (e.target.id === "shared_tags-input") return; */
+    inputRef?.current?.blur();
   };
 
   const addNewTag = () => {
+    if (tagInputValue?.trim() === "") return;
     tagHandler.addNewTag(tagInputValue);
     setTagInputValue("");
     onClickOutside();
@@ -119,6 +119,7 @@ const TagDropdown = ({
         hasItems={!!dropdownItems.length}
         clickOutsideAction={onClickOutside}
         withBackdrop={false}
+        enableKeyboardEvents={false}
       >
         {dropdownItems}
       </StyledDropDown>

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

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useState, useRef } from "react";
 import styled from "styled-components";
 
 import TagList from "./TagList";
@@ -27,6 +27,7 @@ const StyledTagInput = styled.div`
 `;
 
 const TagInput = ({ t, tagHandler, setIsScrollLocked, isDisabled }) => {
+  const inputRef = useRef();
   const [tagInput, setTagInput] = useState("");
   const [isDropdownOpen, setIsDropdownOpen] = useState(false);
 
@@ -49,6 +50,7 @@ const TagInput = ({ t, tagHandler, setIsScrollLocked, isDisabled }) => {
       hasTags={!!tagHandler.tags.length}
     >
       <InputParam
+        ref={inputRef}
         id="shared_tags-input"
         title={`${t("Common:Tags")}:`}
         placeholder={t("TagsPlaceholder")}
@@ -60,6 +62,7 @@ const TagInput = ({ t, tagHandler, setIsScrollLocked, isDisabled }) => {
       />
 
       <TagDropdown
+        inputRef={inputRef}
         open={isDropdownOpen}
         tagHandler={tagHandler}
         tagInputValue={tagInput}