Drag & drop does not work in modal

[noelgoodday]

We're experiencing a problem with drag & drop in the new AppBridge modal. I imported this dnd-kit example into a modal and it doesn't work. The items are not draggable. There are no errors in the console or anything else indicating where the problem may be. https://codesandbox.io/p/sandbox/dnd-kit-sortable-starter-template-22x1ix

Drag & drop without modal works:

import App from './App';

export default function Dnd() {
  return <App />;
}

Drag & drop within Polaris modal works:

import { Modal } from '@shopify/polaris';

export default function Dnd() {
  return (
    <Modal open={true} title={undefined} onClose={() => {}}>
      <App />
    </Modal>
  );
}

Drag & drop within AppBridge modal does not work:

import { Modal } from '@shopify/app-bridge-react';

export default function Dnd() {
  return (
    <Modal open={true}>
      <App />
    </Modal>
  );
}

[charlesdobson]

Hi @noelgoodday,

We recommend using the src modal for more complex use cases like drag and drop . Documentation for that is here: https://shopify.dev/docs/api/app-bridge-library/react-components/modal#modalcomponent-propertydetail-src.

That will allow you to use that dnd library.

We'll be adding some more documentation around this shortly.

[noelgoodday]

Hi @noelgoodday,

We recommend using the src modal for more complex use cases like drag and drop . Documentation for that is here: https://shopify.dev/docs/api/app-bridge-library/react-components/modal#modalcomponent-propertydetail-src.

That will allow you to use that dnd library.

We'll be adding some more documentation around this shortly.

@charlesdobson thanks for the hint towards the src attribute. We'll give that a shot and will report back.

[schiller-manuel]

Hi @noelgoodday,

We recommend using the src modal for more complex use cases like drag and drop . Documentation for that is here: https://shopify.dev/docs/api/app-bridge-library/react-components/modal#modalcomponent-propertydetail-src.

That will allow you to use that dnd library.

We'll be adding some more documentation around this shortly.

why can't a drag&drop library or other "complex use cases" be properly rendered in the react portal based modal?

[TarikVelic]

Src doesn't work for me because it's almost impossible to set it up so that data can be fetched, sent, etc. Is there any other solution? @charlesdobson

[noelgoodday]

I tried the src attribute but it seems that there's no authorization bearer token as part of the requests from the iframed modal content. Putting that approach on pause for now.

[TarikVelic]

https://d.pr/i/zxfTCW Maybe because of this error src is not working, does anyone know how to fix this problem?

[Zetxus]

@charlesdobson

I also stumbled upon the fetching/missing auth problems that the people above mentioned while using the src approach.

Can you actually show anything other than static content in modals utilizing the src attribute, or am I missing something?