Reputation: 61
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