Merge pull request #1092 from ONLYOFFICE/bugfix/create-room-tag-input

Bugfix/create room tag input

packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/StyledDropdown.js

@@ -20,6 +20,8 @@ const StyledDropDown = styled(DropDown)`
   box-shadow: 0px 12px 40px rgba(4, 15, 27, 0.12);
   border-radius: 3px;
   overflow: hidden;
+  ${(props) => !props.hasItems && "visibility: hidden"};
+  /* visibility: hidden */
 
   width: 446px;
   max-width: 446px;

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

@@ -40,7 +40,8 @@ const TagDropdown = ({
     e.preventDefault();
   };
 
-  const onClickOutside = () => {
+  const onClickOutside = (e) => {
+    if (e.target.id === "shared_tags-input") return;
     document.getElementById("shared_tags-input").blur();
   };
 
@@ -108,18 +109,18 @@ const TagDropdown = ({
       className="dropdown-content-wrapper"
       onMouseDown={preventDefault}
     >
-      {!!dropdownItems.length && (
-        <StyledDropDown
-          className="dropdown-content"
-          open={open}
-          forwardedRef={dropdownRef}
-          clickOutsideAction={onClickOutside}
-          maxHeight={dropdownMaxHeight}
-          showDisabledItems={false}
-        >
-          {dropdownItems}
-        </StyledDropDown>
-      )}
+      <StyledDropDown
+        className="dropdown-content"
+        open={open}
+        forwardedRef={dropdownRef}
+        maxHeight={dropdownMaxHeight}
+        showDisabledItems={false}
+        hasItems={!!dropdownItems.length}
+        clickOutsideAction={onClickOutside}
+        withBackdrop={false}
+      >
+        {dropdownItems}
+      </StyledDropDown>
     </StyledDropDownWrapper>
   );
 };

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

@@ -11,6 +11,8 @@ const StyledTagList = styled.div`
   width: 100%;
 
   .set_room_params-tag_input-tag {
+    background: ${(props) =>
+      props.theme.createEditRoomDialog.tagInput.tagBackground};
     padding: 6px 8px;
     border-radius: 3px;
     margin: 0;
@@ -31,7 +33,19 @@ const TagList = ({ defaultTagLabel, tagHandler, isDisabled }) => {
 
   return (
     <StyledTagList className="set_room_params-tag_input-tag_list">
-      {tags.length ? (
+      {tags.map((tag) => (
+        <Tag
+          key={tag.id}
+          className="set_room_params-tag_input-tag"
+          tag="script"
+          label={tag.name}
+          isNewTag
+          onDelete={() => {
+            onDeleteAction(tag.id);
+          }}
+        />
+      ))}
+      {/* {tags.length ? (
         tags.map((tag) => (
           <Tag
             key={tag.id}
@@ -51,7 +65,7 @@ const TagList = ({ defaultTagLabel, tagHandler, isDisabled }) => {
           label={defaultTagLabel}
           isDefault
         />
-      )}
+      )} */}
     </StyledTagList>
   );
 };

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

@@ -22,6 +22,8 @@ const StyledTagInput = styled.div`
     max-width: 100%;
     position: relative;
   }
+
+  ${({ hasTags }) => !hasTags && "margin-bottom: -8px"}
 `;
 
 const TagInput = ({
@@ -48,7 +50,10 @@ const TagInput = ({
   };
 
   return (
-    <StyledTagInput className="set_room_params-input set_room_params-tag_input">
+    <StyledTagInput
+      className="set_room_params-input set_room_params-tag_input"
+      hasTags={!!tagHandler.tags.length}
+    >
       <InputParam
         id="shared_tags-input"
         title={`${t("Common:Tags")}:`}

packages/components/themes/base.js

@@ -2390,6 +2390,10 @@ const Base = {
       descriptionColor: "#555f65",
     },
 
+    tagInput: {
+      tagBackground: "#ECEEF1",
+    },
+
     dropdown: {
       background: "#ffffff",
       borderColor: "#d0d5da",
@@ -3005,13 +3009,12 @@ const Base = {
     boxShadow: "0px 5px 20px rgba(4, 15, 27, 0.07)",
   },
 
-
   preparationPortalProgress: {
     backgroundColor: "#F3F4F4",
     colorPercentSmall: "#333333",
     colorPercentBig: "#FFFFFF",
- },
- 
+  },
+
   codeInput: {
     background: white,
     border: "1px solid #d0d5da",

packages/components/themes/dark.js

@@ -2390,6 +2390,10 @@ const Dark = {
       descriptionColor: "#a3a9ae",
     },
 
+    tagInput: {
+      tagBackground: "#292929",
+    },
+
     dropdown: {
       background: "#333333",
       borderColor: "#474747",