When using :on-click={"name", target="#target_id"} I cannot seem to get a sibling to target another sibling node that is rendered in the same parent.

[severian1778]

Describe the bug

I have a liveview with two components that render content into their slots. One is a live component that has a substate managing some ui, the other is simply a component with a button in it that I want to trigger a function in the live component.

The heirarchy is:

When I use the following action.

You can clearly see the on click event.

The component is rendered int he parent liveview ->

I can target the parent (which is the liveview) fairly easily and that is great, but when I want to talk to a sibling live component, rendered in the same liveview -> as thus:

I get an error in the console:

and just for completion here is the call to "tokenslotrail", the component I want to target, which is rendered in the same parent liveview.

Is there some limitation I am missing? The documentation is very sparse and I can't understand why I simply cannot target any node I want by id.

Thank you so much for helping

How to reproduce it

1. ... It should be obvious from above.

The behavior you expected

I expect a onclick target Js push to simply target the node that I want to when I push the event to it and pattern match the handle_event there.

Your Environment

Surface: v0.1.1
LiveView: v0.19
Elixir: v1.14.2

[petermueller]

@severian1778 I'm not sure, but when I've usually run into something like this I check the page, and it's usually that the surface component, or live component is taking in an id attribute but not passing it as the HTML tag's id.

This usually happens for me when I add an id in a parent, as it's required for the server to correctly track the state. But I often have some other id that I set in the actual ~F.

If you run document.querySelectorAll("#tokenslotrail") does it show up?