I'm currently developing an application that features multiple columns in a MUI Grid, enabling horizontal scrolling. This app serves as a task planner, and I aim to implement drag-and-drop functionality for tasks moving between the visible columns on the screen. To achieve this, I am utilizing the hello-pangea/dnd library for managing drag-and-drop operations, alongside Material UI's Grid component for column arrangement.
One issue I encountered is with automatic scrolling while dragging tasks within the Grid. I would like to disable this behavior during drag-and-drop interactions.
My attempted solution involved dynamically adjusting the CSS style of the Grid's overflow property based on the drag state - setting overflow-x to hidden when dragging, and keeping it as scroll otherwise. Despite my expectations, this approach failed to prevent scrolling within the Grid as demonstrated by the GIF below:
https://i.sstatic.net/9coIj.gif
(I recognize the need for UI improvements, which will be addressed in due time)
I conducted tests on both Google Chrome and Safari browsers. Additionally, I experimented with managing the Grid's sx using a state variable, but was met with unsuccessful results. Here is a snippet of my code demonstrating these efforts:
const View = (props) => {
const [currentOverflow, setCurrentOverflow] = useState("scroll");
// ...taskView definition...
// props.dragging: boolean indicating dragging status passed from parent
useEffect(() => {
setCurrentOverflow(props.dragging ? "hidden" : "scroll");
}, [props.dragging])
return (
<Grid
id={taskViewGridId}
className="taskview"
sx={{
overflow: currentOverflow
}}
>
{taskView}
</Grid>
)
}
Previously, my attempt to control overflow via CSS mirrored the above method, with a callback in the useEffect resembling this:
var gridElt = document.getElementById(taskViewGridId);
if (props.dragging) {
gridElt.classList.remove("enable-scroll");
gridElt.classList.add("disable-scroll");
} else {
gridElt.classList.remove("disable-scroll");
gridElt.classList.add("enable-scroll");
}
Accompanying CSS classes were defined as follows:
.disable-scroll {
overflow-x: hidden;
}
.enable-scroll {
overflow-x: scroll;
}
If anyone can provide insight into how to resolve this issue and effectively disable scrolling within the MUI Grid based on drag-and-drop activity, your assistance would be greatly appreciated.
Thank you.