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({
}>
- {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,
- }
- )}
+
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,
+ }
+ )}
+
)}
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(false);
+
return (
<>
@@ -49,6 +52,7 @@ export default function FilterInputsCollection({
key={query.id}
draggableId={query.id.toString()}
index={index}
+ isDragDisabled={isDraggingDisabled}
>
{(provided) => (
{
+ setIsDraggingDisabled(isDisabled);
+ }}
index={index}
noOfQueries={queries.length}
/>