From 54dae57fea5547ab241b54f8f09b087a16709d65 Mon Sep 17 00:00:00 2001
From: AnushDeokar <deokaranush@gmail.com>
Date: Fri, 23 Feb 2024 00:01:03 +0530
Subject: [PATCH] fix filter on slider

---
 .../TableToolbar/Filters/FilterInputs.tsx     | 53 +++++++++++--------
 .../Filters/FilterInputsCollection.tsx        |  7 +++
 2 files changed, 38 insertions(+), 22 deletions(-)

diff --git a/src/components/TableToolbar/Filters/FilterInputs.tsx b/src/components/TableToolbar/Filters/FilterInputs.tsx
index be023e9e6..c234e322a 100644
--- a/src/components/TableToolbar/Filters/FilterInputs.tsx
+++ b/src/components/TableToolbar/Filters/FilterInputs.tsx
@@ -40,6 +40,7 @@ export interface IFilterInputsProps {
   handleChangeColumn: (column: string) => void;
   joinOperator: "AND" | "OR";
   setJoinOperator: (operator: "AND" | "OR") => void;
+  setIsDraggingDisabled: (isDisabled: boolean) => void;
 }
 
 export default function FilterInputs({
@@ -55,6 +56,7 @@ export default function FilterInputs({
   handleDelete,
   index,
   noOfQueries,
+  setIsDraggingDisabled,
 }: IFilterInputsProps) {
   const columnType = selectedColumn ? getFieldType(selectedColumn) : null;
 
@@ -155,28 +157,35 @@ export default function FilterInputs({
               </InputLabel>
 
               <Suspense fallback={<FieldSkeleton />}>
-                {columnType &&
-                  createElement(
-                    query.key === "_rowy_ref.id"
-                      ? IdFilterInput
-                      : getFieldProp("filter.customInput" as any, columnType) ||
-                          getFieldProp("SideDrawerField", columnType),
-                    {
-                      column: selectedColumn,
-                      _rowy_ref: {},
-                      value: query.value,
-                      onSubmit: () => {},
-                      onChange: (value: any) => {
-                        const newQuery = {
-                          ...query,
-                          value,
-                        };
-                        setQuery(newQuery);
-                      },
-                      disabled,
-                      operator: query.operator,
-                    }
-                  )}
+                <div
+                  onMouseEnter={() => setIsDraggingDisabled(true)}
+                  onMouseLeave={() => setIsDraggingDisabled(false)}
+                >
+                  {columnType &&
+                    createElement(
+                      query.key === "_rowy_ref.id"
+                        ? IdFilterInput
+                        : getFieldProp(
+                            "filter.customInput" as any,
+                            columnType
+                          ) || getFieldProp("SideDrawerField", columnType),
+                      {
+                        column: selectedColumn,
+                        _rowy_ref: {},
+                        value: query.value,
+                        onSubmit: () => {},
+                        onChange: (value: any) => {
+                          const newQuery = {
+                            ...query,
+                            value,
+                          };
+                          setQuery(newQuery);
+                        },
+                        disabled,
+                        operator: query.operator,
+                      }
+                    )}
+                </div>
               </Suspense>
             </ErrorBoundary>
           )}
diff --git a/src/components/TableToolbar/Filters/FilterInputsCollection.tsx b/src/components/TableToolbar/Filters/FilterInputsCollection.tsx
index 0f23f29d1..f96b1f949 100644
--- a/src/components/TableToolbar/Filters/FilterInputsCollection.tsx
+++ b/src/components/TableToolbar/Filters/FilterInputsCollection.tsx
@@ -1,3 +1,4 @@
+import { useState } from "react";
 import FilterInputs from "./FilterInputs";
 
 import { Button } from "@mui/material";
@@ -37,6 +38,8 @@ export default function FilterInputsCollection({
     });
   };
 
+  const [isDraggingDisabled, setIsDraggingDisabled] = useState<boolean>(false);
+
   return (
     <>
       <DragDropContext onDragEnd={onDragEnd}>
@@ -49,6 +52,7 @@ export default function FilterInputsCollection({
                     key={query.id}
                     draggableId={query.id.toString()}
                     index={index}
+                    isDragDisabled={isDraggingDisabled}
                   >
                     {(provided) => (
                       <div
@@ -83,6 +87,9 @@ export default function FilterInputsCollection({
                               return newQueries;
                             });
                           }}
+                          setIsDraggingDisabled={(isDisabled: boolean) => {
+                            setIsDraggingDisabled(isDisabled);
+                          }}
                           index={index}
                           noOfQueries={queries.length}
                         />