onDragEnter/onDragLeave on antd table

Question

I have a problem with the onDragEnter/onDragLeave events in react on an antd table.

For information, I use antd and react 18.

     /**
       * 
       * @param e 
       */
      function handleDragEnter(e: DragEvent<HTMLDivElement>) {
        console.log('e:', e)
        e.preventDefault()
        e.stopPropagation()
        setDragged(true)
      }
    
    
      /**
       * 
       * @param e 
       */
      function handleDragLeave(e: DragEvent<HTMLDivElement>) {
        console.log('e:', e)
        e.preventDefault()
        e.stopPropagation()
        setDragged(false)
      }

    return (
      <>
        <div className="DrivesList" onDrop={handleDrop} onDragEnter={handleDragEnter} onDragLeave={handleDragLeave}>
          <Table
            className={classNames({
              'DrivesList-table-loading': droppedFilesLoading,
            })}

....
     

As you can see in the following screenshot, events are triggered many times when I drag over the board :

For information, if I comment the table (still the main div), these events work perfectly.

Any ideas ?

Thanks in advance.

PS:I want to add a border around the div when I drag over it.

Answer 1

Solved using pointer-events: none in child.