Ability to control where the detached modal is injected

[sarahdayan]

When using autocomplete-js in detached mode, the modal is injected at the end of the body.

This is problematic when using the library within a client-side router provider (e.g., react-router), especially when using child routes with components like <Outlet /> which don't let you control at what level the <Router /> wraps the app.

Therefore, you can't use <Link /> components inside Autocomplete because it will render outside of the router.

One workaround I tried exploring was to pass an environment with a mocked document.body, but couldn't make it work so far.

Maybe we could provide a detachedContainer option to let users render the modal wherever they want, and default it to environment.document.body.

[francoischalifour]

The fact that React Contexts are unavailable in the Autocomplete modal seems unrelated to where the modal is added in the DOM. Contexts are available from the React tree, not from the DOM tree.

As long as we call render() and not use Portals, React Context won't be shared.

[sarahdayan]

Yeah that makes a lot more sense 🤦‍♀️

I recall that we had a workaround in Next.js but we didn't document it. We should probably do.