Common:Filter: close sort menu after change

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

@@ -8,7 +8,7 @@ import IconButton from "@docspace/components/icon-button";
 import ViewSelector from "@docspace/components/view-selector";
 import Text from "@docspace/components/text";
 
-import { mobile } from "@docspace/components/utils/device";
+import { isMobile, mobile } from "@docspace/components/utils/device";
 import { Base } from "@docspace/components/themes";
 
 import SortDesc from "PUBLIC_DIR/images/sort.desc.react.svg";
@@ -19,7 +19,7 @@ import { Events } from "@docspace/common/constants";
 const selectedViewIcon = css`
   svg {
     path {
-      fill: ${props => props.theme.filterInput.sort.selectedViewIcon};
+      fill: ${(props) => props.theme.filterInput.sort.selectedViewIcon};
     }
   }
 `;
@@ -27,14 +27,15 @@ const selectedViewIcon = css`
 const notSelectedViewIcon = css`
   svg {
     path {
-      fill: ${props => props.theme.filterInput.sort.viewIcon};
+      fill: ${(props) => props.theme.filterInput.sort.viewIcon};
     }
   }
 `;
 
 const StyledSortButton = styled.div`
   .combo-button {
-    background: ${props => props.theme.filterInput.sort.background} !important;
+    background: ${(props) =>
+      props.theme.filterInput.sort.background} !important;
 
     .icon-button_svg {
       cursor: pointer;
@@ -45,7 +46,7 @@ const StyledSortButton = styled.div`
     width: 32px;
     height: 32px;
 
-    ${props =>
+    ${(props) =>
       props.theme.interfaceDirection === "rtl"
         ? css`
             margin-right: 8px;
@@ -89,12 +90,12 @@ const StyledSortButton = styled.div`
           }
 
           .view-selector-icon:nth-child(1) {
-            ${props =>
+            ${(props) =>
               props.viewAs === "row" ? selectedViewIcon : notSelectedViewIcon};
           }
 
           .view-selector-icon:nth-child(2) {
-            ${props =>
+            ${(props) =>
               props.viewAs !== "row" ? selectedViewIcon : notSelectedViewIcon};
           }
         }
@@ -116,14 +117,14 @@ const StyledSortButton = styled.div`
           display: flex;
           visibility: hidden;
           cursor: pointer;
-          ${props =>
+          ${(props) =>
             props.isDesc &&
             css`
               transform: rotate(180deg);
             `}
 
           path {
-            fill: ${props => props.theme.filterInput.sort.sortFill};
+            fill: ${(props) => props.theme.filterInput.sort.sortFill};
           }
         }
 
@@ -135,7 +136,7 @@ const StyledSortButton = styled.div`
       }
 
       .selected-option-item {
-        background: ${props => props.theme.filterInput.sort.hoverBackground};
+        background: ${(props) => props.theme.filterInput.sort.hoverBackground};
         cursor: auto;
 
         .selected-option-item__icon {
@@ -149,7 +150,7 @@ const StyledSortButton = styled.div`
       align-items: center;
       justify-content: center;
 
-      ${props =>
+      ${(props) =>
         props.theme.interfaceDirection === "rtl"
           ? css`
               margin-left: 0;
@@ -199,7 +200,7 @@ const SortButton = ({
     const value = getSortData && getSortData();
     const selectedValue = getSelectedSortData && getSelectedSortData();
 
-    const data = value.map(item => {
+    const data = value.map((item) => {
       item.className = "option-item";
       item.isSelected = false;
       if (selectedValue.sortId === item.key) {
@@ -227,7 +228,7 @@ const SortButton = ({
   }, [getSortDataAction]);
 
   const toggleCombobox = React.useCallback(() => {
-    setIsOpen(val => !val);
+    setIsOpen((val) => !val);
   }, []);
 
   React.useEffect(() => {
@@ -235,7 +236,7 @@ const SortButton = ({
   }, [isOpen]);
 
   const onOptionClick = React.useCallback(
-    e => {
+    (e) => {
       const key = e.target.closest(".option-item").dataset.value;
 
       let sortDirection = selectedSortData.sortDirection;
@@ -244,9 +245,9 @@ const SortButton = ({
         sortDirection = sortDirection === "desc" ? "asc" : "desc";
       }
 
-      let data = sortData.map(item => ({ ...item }));
+      let data = sortData.map((item) => ({ ...item }));
 
-      data = data.map(item => {
+      data = data.map((item) => {
         item.className = "option-item";
         item.isSelected = false;
         if (key === item.key) {
@@ -264,7 +265,7 @@ const SortButton = ({
         sortDirection: sortDirection,
       });
 
-      toggleCombobox();
+      // toggleCombobox();
 
       onSort && onSort(key, sortDirection);
     },
@@ -288,13 +289,14 @@ const SortButton = ({
           <DropDownItem isSeparator={true}></DropDownItem>
         </>
       )}
-      {sortData?.map(item => (
+      {sortData?.map((item) => (
         <DropDownItem
           id={item.id}
           onClick={onOptionClick}
           className={item.className}
           key={item.key}
-          data-value={item.key}>
+          data-value={item.key}
+        >
           <Text fontWeight={600}>{item.label}</Text>
           <SortDesc
             className={`option-item__icon${
@@ -316,16 +318,17 @@ const SortButton = ({
     <>
       <Backdrop
         visible={isOpen}
-        withBackground={false}
+        withBackground={isMobile()}
         onClick={toggleCombobox}
-        withoutBlur={true}
+        withoutBlur={!isMobile()}
       />
       <StyledSortButton
         viewAs={viewAs}
         isDesc={selectedSortData.sortDirection === "desc"}
         onClick={toggleCombobox}
         id={id}
-        title={title}>
+        title={title}
+      >
         <ComboBox
           opened={isOpen}
           onToggle={toggleCombobox}
@@ -341,7 +344,8 @@ const SortButton = ({
           disableItemClick={true}
           isDefaultMode={false}
           manualY={"102%"}
-          advancedOptionsCount={advancedOptionsCount}>
+          advancedOptionsCount={advancedOptionsCount}
+        >
           <IconButton iconName={SortReactSvgUrl} size={16} />
         </ComboBox>
       </StyledSortButton>