Disable Scroll When Dragging in MUI Grid

Question

I'm currently writing an app where I have many columns in a MUI Grid, scrolling horizontally. It's a task planner app, and when I create a task, I want to be able to drag it between the different columns that are visible on the screen. I'm using hello-pangea/dnd to control the drag and drop functionality of the tasks, and as mentioned earlier, Material UI for the Grid that stores the columns.

However, I don't like the fact that it scrolls while I'm dragging - the Grid automatically scrolls while I'm dragging tasks. I want to disable this.

I already tried dynamically setting the overflow CSS style of the Grid depending on whether or not I'm dragging - if dragging, set overflow-x to hidden, otherwise, keep it as scroll. I expected this to disable the ability to scroll in the Grid, because if I initialize the Grid to have overflow-x: hidden, then scrolling is disabled. But, as you can see below, this does not help. Even though the style changes from overflow: scroll to overflow: hidden, the Grid still scrolls while dragging:

(yes the UI needs work, I'll get to it eventually)

I tested this on both Google Chrome as well as Safari. I also tried using a state variable and setting the sx of the Grid component as follows. This didn't work either. My code looks something like the following:

const View = (props) => {
    const [currentOverflow, setCurrentOverflow] = useState("scroll");

    // ...definition of taskView, etc...

    // props.dragging is a boolean passed down from the parent element
    // that is true when an item is being dragged, otherwise false 
    useEffect(() => {
        setCurrentOverflow((props.dragging) ? "hidden" : "scroll");
    }, [props.dragging])

    return (
        <Grid
            id={taskViewGridId}
            className="taskview"
            sx={{
                overflow: currentOverflow
            }}
        >
            {taskView}
        </Grid>
    )
}

The way I was trying to set the overflow parameter using CSS as I showed in that GIF before this code snippet was similar to the above, except the callback in the useEffect looked like 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");
}

where the associated CSS classes were just

.disable-scroll {
    overflow-x: hidden;
}

.enable-scroll {
    overflow-x: scroll;
}

Can someone please help me figure this out? How do I disable scrolling in the MUI Grid depending on whether or not something is being dragged?

Thank you.

Answer 1

Fixed this. The @hello-pangea/dnd library automatically scrolls the window while dragging. An option to disable this has now been added to the library in their latest release.