Evening, I’ve just run into a problem when playing round with a new LiveView form.
I’m looking to add associations to the form using a typeahead style interface. I start punching in a query and get a list of matches back, when I click it or use arrows keys & enter to select it my selection is added to the changeset and some additional fields based on my selection replaces the search box/results. The I can add another association below and repeat the process.
From a UX perspective I liked the search box being where the association is being added, rather than at the top of the form or off the side. For that reason I used a Live Component for each association that gets added to the changeset, which managed the query string and results internally.
The tricky bit is that I need a <form>
for the search within the larger <form>
and this seems to cause issues - the opening <form>
tag for the search in the live component is being removed I think, and that search form would need a phx-change
that targets the component to get the search results, but the phx-submit
would need to target the component above it for adding the association to the changeset.
I’ve tied myself in knots thinking about this. Anyone done anything similar before with an example I could take a look at?