How to handle portals? - Githubissues

How can you render a child element of a controller into a different part of the DOM but delegate the events back to the original controller. This is the portal concept from React.

This is a common pattern with dropdowns, popovers, modals, etc. I'm not sure how to go about handling this scenario in stimulus.

For example, let's say your building a Popover, but you want to render the popover content in the <body> element so it's displayed over all other elements.

<body>
  <div data-controller="popover">
    <button data-action="click->popover#open">Open</button>
    <div data-target="popover.content" hidden>
      <div data-action="click->popover#handleClick">
        click me!
      </div>
    </div>
  </div>

  <!-- 
  when the popover button is clicked, you would copy the popover content
  and insert it into the DOM here, but you would still want the `#handleClick` action
  to trigger on the original controller.
  -->
  <div data="click->popover#handleClick">
     click me!
   </div>
</body>

Maybe there is some scope/context trickery that can be done to create some portal-type instance of a controller element, but delegate actions to a different controller? For example:

<body>
  <div data-controller="portal">
    <div data-controller="popover">
      <button data-action="click->popover#open">Open</button>
      <div data-target="portal.content" hidden>
        <div data-action="click->portal#delegate" data-to="popover#handleClick">
          click me!
        </div>
      </div>
    </div>

    <!--
    the portal controller could create a copy element for each portal.content
    it finds, then delegate to the proper controller somehow?
    -->
    <div data-action="click->portal#delegate" data-to="popover#handleClick">
      click me!
    </div>
  </div>
</body>

Have you guys used this pattern for anything on Basecamp? Any tips/ideas?

hotwired / stimulus

How to handle portals? #73