Merger
Merger

Reputation: 61

`drop` event in React is always `defaultPrevented=true`

I have a page in NextJS and in my layout I have a quite complicated Tree component and my main page is a Server-side page with some client side components like Comments component. In comments, I use Tiptap Editor and the problem is that when my Tree is rendered in layout, the drag-and-drop functionality of my editor does not work because all drop event has defaultPrevented=true. When I remove Tree from layout, it works fine. I tried to search for a piece of code where I maybe use event.preventDefault() but I didn't find anything there. I just used useEffect to log all my events and from very beginning they are defaultPrevented:

'use client';
import { BookTreeProvider } from '@/app/(public)/resources/books/[name]/book-tree-provider';
import { HydrationLoader } from '@/components/loaders/hydration-loader';
import { ResponsiveTree } from '@/components/tree/responsive-tree';
import { useEffect } from 'react';

interface LayoutProps {
  children: React.ReactNode;
  params: { name: string };
}

export default function Layout({ children, params }: LayoutProps) {
  useEffect(() => {
    document.addEventListener('drop', (event) => {
      console.log('drop', event);
      console.log('defaultPrevented:', event.defaultPrevented);
    });
  }, []);

  return (
    <BookTreeProvider name={params.name}>
      <div className='flex'>
        <HydrationLoader />
        <ResponsiveTree /> // Works when I remove it
        <main className='flex-1'>{children}</main>
      </div>
    </BookTreeProvider>
  );
}

Is it possible that React somehow prevents my events or there must be a piece of code somehwere that do it? How can I find it?

Upvotes: 0

Views: 13

Answers (0)

Related Questions