Many-to-many form with autocomplete

I am trying to build a form that allows users to create a Team with leaders and members that I’ve set up as many_to_many relation with User table. User should be able to dynamically add as many members or leaders as he wants when creating a new Team.

I find creating something like this to be a pretty challenging experience with Phoenix.

I have built an autocomplete component that allows to select a user by typing an email. Then, I am trying to use this component inside my new Team form. Once a selection is made, I am sending an event with the selected user_id to the parent component, where I try to modify my Ecto Changeset to reflect the addition.

The entire setup is pretty convoluted with sending events between form and autocomplete components, sharing changeset and parent component IDs for sending messages from autocomplete back to form. Is this functionality something that I should avoid building when working with Phoenix and LiveView?

Here is a list of problems that I am meeting:

1. I can’t figure out how to add a link to an existing user into a changeset
2. The entire form gets validated each time I type a letter in the team name field
3. Each time when I add a new user entry to the autocomplete component, all other entries get erased (I guess I reset the state accidentally somewhere in the code)

I was not able to find up-to-date examples on how to build such forms. Could someone navigate me on how to approach this?

I have uploaded my code for reference:

• Autocomplete component
• Team form
• Team entity