I am creating a table, where users may edit some fields just by typing and changing their text. It is a functional component that my be placed in a Live Component or in a Live View. My idea is to not use forms for it, just having the input tag send the changes to the server using phx-change and dealing with it from there.

The component that renders a cell looks like this:

<td>
  <input
    type="text"
    id={"#{@field_name}--#{@row_id}"}
    name={"table[#{@field_name}--#{@row_id}]"}
    value={@value}
    phx-debounce={500}
    phx-change={assigns[:"phx-change"]}
    {Map.take(assigns, [:"phx-target"])}
  />
</td>

But, when I try to use this in a LiveView without passing a phx-target, as I want the event to be sent to the live view, the error Uncaught TypeError: Cannot read properties of null (reading 'getAttribute')... is raised by view.js at the line let cidOrSelector = target.getAttribute(this.binding("target")) in the targetComponentID method.

Not sure if this has some relation to this input not having form ancestor, or if I am missing something. Any help would be greatly appreciated.