Ability to pass LiveComponent as field

lib/backoffice/live/form_component.ex

@@ -12,9 +12,20 @@ defmodule Backoffice.FormComponent do
      socket
      |> assign(assigns)
      |> assign(:resource, resource)
+     |> assign(:hidden_fields, [])
      |> assign(:changeset, changeset)}
   end
 
+  def update(%{pick: field}, socket) do
+    hidden_fields = socket.assigns.hidden_fields
+
+    socket =
+      socket
+      |> assign(:hidden_fields, Keyword.merge(hidden_fields, List.wrap(field)))
+
+    {:ok, socket}
+  end
+
   @impl true
   def handle_event("validate", %{"resource" => resource_params}, socket) do
     resource = socket.assigns.resource

lib/backoffice/live/form_component.html.leex

@@ -14,6 +14,10 @@
     </div>
   <% end %>
 
+  <%= for {field, opts} <- @hidden_fields do %>
+    <%= hidden_input f, field, opts %>
+  <% end %>
+
   <div class="mt-8 border-t border-gray-200 pt-5">
     <div class="flex justify-end">
       <span class="inline-flex rounded-md shadow-sm">

lib/backoffice/resources.ex

@@ -101,6 +101,12 @@ defmodule Backoffice.Resources do
          )}
       end
 
+      def handle_info({field, value}, socket) do
+        send_update(Backoffice.FormComponent, [{:id, socket.assigns.resource.id}, {field, value}])
+
+        {:noreply, socket}
+      end
+
       defp apply_action(socket, :new, page_opts) do
         socket
         |> assign(:form_fields, Backoffice.Resources.get_form_fields(__MODULE__, :new))

lib/backoffice/views/resource_view.ex

@@ -152,18 +152,18 @@ defmodule Backoffice.ResourceView do
 
   # TODO: Would be nice to support LiveComponent for more complex component
   #   For example, I would like to have a drop-down suggestion logic as I type.
-  # defp do_form_field(form, field, :component, opts) do
-  # component = Keyword.fetch!(opts, :component)
-  # opts = Keyword.merge(opts, form: form, field: field)
+  defp do_form_field(form, field, :component, opts) do
+    component = Keyword.fetch!(opts, :render)
+    opts = Keyword.merge(opts, value: input_value(form, field))
 
-  # live_component(socket, component, opts)
-  # end
+    live_component(_, component, opts)
+  end
 
   # Q: Are there any pitfall to allowing user render fields like this?
   defp do_form_field(form, field, :custom, opts) do
-    slot = Keyword.fetch!(opts, :render)
+    render = Keyword.fetch!(opts, :render)
 
-    slot.(form, field)
+    render.(form, field)
   end
 
   defp do_form_field(form, field, _type, opts) do