Nested LiveComponent events are being sent to the parent LiveComponent

Hi

I have a setup where I have a LiveView -> LiveComponent -> LiveComponent.
My use case is to render a dynamic form. The first LiveComponent renders an input and based on the user value, I render the nested LiveComponent.

I want the second LiveComponent to handle form events such as validation and save (it can send the info to the LiveView in the end with the updated data). However, when I render my forms, the events from the second LiveComponent also get sent to the first LiveComponent.

My primary question is whether the above scenario is possible? If it is, then there’s an error in my code (which I can share to figure out where exactly). Otherwise, I have to rework my application logic to handle things in the first LiveComponent but I would prefer not to (in that case I can probably make a function component of the second form).

Thank You

You’re not nesting a form inside another are you? That’s not valid HTML.

I am so glad you asked this question because that is exactly what I was doing :upside_down_face: and what was causing the issue. As soon as I moved it out of the form, it worked like a charm.

Thank you