Web:Common:FilterInput: update logic for combobox and fix bugs

packages/common/components/FilterInput/index.js

@@ -37,6 +37,9 @@ const FilterInput = React.memo(
 
     isRecentFolder,
     removeSelectedItem,
+
+    isPersonalRoom,
+    isRooms,
   }) => {
     const [viewSettings, setViewSettings] = React.useState([]);
     const [inputValue, setInputValue] = React.useState("");
@@ -116,6 +119,8 @@ const FilterInput = React.memo(
             selectedFilterValue={selectedFilterValue}
             filterHeader={filterHeader}
             selectorLabel={selectorLabel}
+            isPersonalRoom={isPersonalRoom}
+            isRooms={isRooms}
           />
           {!isRecentFolder && (
             <SortButton

packages/common/components/FilterInput/sub-components/FilterBlock.js

@@ -31,6 +31,8 @@ const FilterBlock = ({
   hideFilterBlock,
   onFilter,
   selectorLabel,
+  isPersonalRoom,
+  isRooms,
 }) => {
   const [showSelector, setShowSelector] = React.useState({
     show: false,
@@ -74,14 +76,22 @@ const FilterBlock = ({
             if (groupItem.isMultiSelect) {
               groupItem.isSelected = currentFilter.key.includes(groupItem.key);
             }
+            if (groupItem.withOptions) {
+              groupItem.isSelected = currentFilter.key.includes(groupItem.key);
+            }
           });
         } else {
-          item.groupItem.forEach((groupItem) => {
+          item.groupItem.forEach((groupItem, idx) => {
             groupItem.isSelected = false;
             if (groupItem.isSelector) {
               groupItem.selectedKey = null;
               groupItem.selectedLabel = null;
             }
+            if (groupItem.withOptions) {
+              item.groupItem[idx].options.forEach((x, index) => {
+                item.groupItem[idx].options[index].isSelected = false;
+              });
+            }
           });
         }
       });
@@ -244,7 +254,7 @@ const FilterBlock = ({
 
     setTimeout(() => {
       setIsLoading(false);
-    }, 300);
+    }, 500);
   }, []);
 
   React.useEffect(() => {
@@ -372,7 +382,10 @@ const FilterBlock = ({
           </StyledFilterBlockHeader>
           <div className="filter-body">
             {isLoading ? (
-              <Loaders.FilterBlock />
+              <Loaders.FilterBlock
+                isPersonalRoom={isPersonalRoom}
+                isRooms={isRooms}
+              />
             ) : (
               <Scrollbar className="filter-body__scrollbar" stype="mediumBlack">
                 {filterData.map((item) => {

packages/common/components/FilterInput/sub-components/FilterBlockItem.js

@@ -129,21 +129,23 @@ const FilterBlockItem = ({
   };
 
   const getWithOptionsItem = (item) => {
-    const selectedOption = item.options.find((option) => option.isSelected);
+    const selectedOption =
+      item.options.find((option) => option.isSelected) || item.options[0];
 
     return (
       <ComboBox
+        className={"combo-item"}
         key={item.key}
         onSelect={(data) =>
           changeFilterValueAction(
             data.key,
-            data.key === selectedOption?.key,
+            data.key === item.options[0].key,
             false,
             item.withOptions
           )
         }
         options={item.options}
-        selectedOption={selectedOption ? selectedOption : item.options[0]}
+        selectedOption={selectedOption}
         displaySelectedOption={true}
         scaled={true}
         scaledOptions={true}

packages/common/components/FilterInput/sub-components/FilterButton.js

@@ -17,6 +17,9 @@ const FilterButton = ({
 
   filterHeader,
   selectorLabel,
+
+  isPersonalRoom,
+  isRooms,
 }) => {
   const [showFilterBlock, setShowFilterBlock] = React.useState(false);
 
@@ -42,6 +45,8 @@ const FilterButton = ({
           getFilterData={getFilterData}
           onFilter={onFilter}
           selectorLabel={selectorLabel}
+          isPersonalRoom={isPersonalRoom}
+          isRooms={isRooms}
         />
       )}
     </>

packages/common/components/FilterInput/sub-components/StyledFilterBlock.js

@@ -51,6 +51,10 @@ const StyledFilterBlock = styled.div`
 
   .filter-body {
     height: ${(props) => (props.showFooter ? "calc(100% - 125px)" : "100%")};
+
+    .combo-button {
+      justify-content: space-between;
+    }
   }
 `;