Bug with draggable library after open it in outer window

[IMM9O]

I try to build a Kanban board using react-beautiful-dnd it works fine when the component render in the main window but after goes outer the draggable feature not working any idea what I am missing here or how to make it work

I created a sandbox link to demonstrate my problem pleas check https://toqkl.csb.app/

[nealus]

I expect this is due to the react-beautiful-dnd using the main window/document rather than the one for the popout.

From the readme:

"Because popouts are rendering into a different document to the main layout any code in the popped out tab that uses the global document or window objects will not work correctly (for example custom popup menus), they need to instead use the document/window of the popout. To get the document/window of the popout use the following method on one of the elements rendered in the popout (for example a ref or target in an event handler):

const currentDocument = this.selfRef.current.ownerDocument; const currentWindow = currentDocument.defaultView!; In the above code selfRef is a React ref to the toplevel element in the tab being rendered. "

[thewebmaster]

I'm experiencing the same issue with react-beautiful-dnd

I'm quite new to React but understand that it is because the react-beautiful-dnd is using the main window/document rather than the one from the popout.

My problem is I don't know how to implement and make react-beautiful-dnd use window/document of the popout using const currentDocument = this.selfRef.current.ownerDocument; const currentWindow = currentDocument.defaultView!;

Any example implementations would be greatly appreciated. Thanks in advance @nealus Do you still have this issue @IMM9O ?

[OlgaKostiuk]

Because of this issue with react-beautiful-dnd I had to switch to react-dnd

[eric-ho-github]

Resizing the window after it poped out solved the problem for me.

 React.useEffect(
      () => {
          const currentWindow = getCurrentPopoutWindow(....);      
          currentWindow.resizeTo(currentWindow.outerWidth, currentWindow.outerHeight);
      },
      []
    );