Skip to content
Advertisement

How to avoid a child div in react invoking a parent’s `onDragLeave` event

Please see this codesandbox.

I have a parent div that needs to handle for draggable events (such as when a file is dragged over it). When onDragEnter is invoked, I want the background color to change. However, I have a child div, which, when hovering over it, invokes the parent div’s onDragLeave event. I’ve tried using a ref with this child div to determine if the event target is contained in the child div but that doesn’t seem to be working. How can I avoid a child div in React invoking the onDragLeave event? Thanks!

import React, { useState } from 'react';

const App = () => {
  const [dragOver, setDragOver] = useState(false);

  const preventDefaults = (event) => {
    event.preventDefault();
    event.stopPropagation();
  };

  const onDragEnter = (event) => {
    preventDefaults(event);
    console.log('ENTER');
    if (!dragOver) {
      setDragOver(true);
    }
  };

  const onDragLeave = (event) => {
    preventDefaults(event);
    console.log('LEAVE');
    setDragOver(false);
  };

  return (
    <div
      data-testid="document-upload"
      onDragEnter={onDragEnter}
      onDragLeave={onDragLeave}
      style={{ 
        background: dragOver ? 'green' : 'red',
        height: '20rem',
        width: '20rem',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
      }}
    >
      <div
        style={{ border: '2px solid blue', height: '10rem', width: '10rem' }}
      />
    </div>
  );
};

export default App;

Advertisement

Answer

The simplest way to do this would be to set pointerEvents: "none" in the style prop of the child <div>, so that all pointer-related events on this div are ignored. That would introduce some limitations, though – like you couldn’t bind click events to the child div.

If this doesn’t fit within the constraints of your application, you can modify your onDragLeave handler to inspect the relatedTarget of the event (see docs). If the drag is leaving the parent <div> but entering a child of the parent, then the relatedTarget (i.e. child div), will be contained (see docs) by the currentTarget (i.e. the parent <div>)

Here’s the code that should work:

const onDragLeave = (event) => {
    preventDefaults(event);
    // This condition will be true when the drag leaves the parent for a child,
    // but false when the drag leaves the parent for somewhere else.
    if (event.currentTarget.contains(event.relatedTarget)) return;
    console.log("LEAVE");
    setDragOver(false);
  };

See this codesandbox.

Advertisement