Skip to content

Portals inside LiveComponents not receiving all events #4101

Description

@dmarkow

Environment

  • Elixir version (please paste the output of elixir -v):
Erlang/OTP 27 [erts-15.2.7.4] [source] [64-bit] [smp:16:16] [ds:16:16:10] [async-threads:1] [jit]

Elixir 1.19.4 (compiled with Erlang/OTP 27)
  • Phoenix and LiveView versions (mix deps | grep -w 'phoenix\|phoenix_live_view'):
* phoenix 1.8.3 (Hex package) (mix)
  locked at 1.8.3 (phoenix) 36169f95
* phoenix_live_view 1.1.19 (Hex package) (mix)
  locked at 1.1.19 (phoenix_live_view) d5ad357d
  • Operating system:
  • Windows
  • MacOS
  • Linux
  • Other (please specify):
  • Browsers (including version) you attempted to reproduce this bug on (the more the merrier):
Chrome

Actual behavior

I have a LiveComponent that renders a modal through a portal, and there is an element with a hook tied to it inside that portal. When the modal is closed, it sends a "close-modal" event to the LiveComponent. I need the portal, as this LiveComponent has a form and is used inside another form (it renders a hidden input based on a search), and you can't have nested forms.

If I don't use a portal, the LiveComponent receives the message as expected. However, introducing the portal causes the event to be sent to the parent LiveView instead.

Single-file reproduction included. The first button sets the message inside the LiveComponent as expected, the second button uses a portal and the app crashes when it tries to send the "test" event to the parent LiveView.

https://gist.github.com/dmarkow/a32ba6e38efc998029b73c923c02e53c

Expected behavior

Portals shouldn't affect where the events get sent.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions