Web:Common:FilterInput: add render filter block with portal for mobile devices

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

@@ -1,4 +1,6 @@
 import React from "react";
+import { withTranslation } from "react-i18next";
+import { isMobileOnly } from "react-device-detect";
 
 import Loaders from "../../Loaders";
 
@@ -6,6 +8,8 @@ import Backdrop from "@docspace/components/backdrop";
 import Button from "@docspace/components/button";
 import Heading from "@docspace/components/heading";
 import IconButton from "@docspace/components/icon-button";
+import Scrollbar from "@docspace/components/scrollbar";
+import Portal from "@docspace/components/portal";
 
 import FilterBlockItem from "./FilterBlockItem";
 
@@ -19,8 +23,6 @@ import {
   StyledControlContainer,
   StyledCrossIcon,
 } from "./StyledFilterBlock";
-import { withTranslation } from "react-i18next";
-import Scrollbar from "@docspace/components/scrollbar";
 
 //TODO: fix translate
 const FilterBlock = ({
@@ -337,7 +339,7 @@ const FilterBlock = ({
 
   const showFooter = isEqualFilter();
 
-  return (
+  const filterBlockComponent = (
     <>
       {showSelector.show ? (
         <>
@@ -443,6 +445,20 @@ const FilterBlock = ({
       />
     </>
   );
+
+  const renderPortalFilterBlock = () => {
+    const rootElement = document.getElementById("root");
+
+    return (
+      <Portal
+        element={filterBlockComponent}
+        appendTo={rootElement}
+        visible={true}
+      />
+    );
+  };
+
+  return isMobileOnly ? renderPortalFilterBlock() : filterBlockComponent;
 };
 
 export default React.memo(withTranslation("Common")(FilterBlock));