Environment

• Elixir version (please paste the output of elixir -v):

Erlang/OTP 27 [erts-15.2.7.4] [source] [64-bit] [smp:16:16] [ds:16:16:10] [async-threads:1] [jit]

Elixir 1.19.4 (compiled with Erlang/OTP 27)

• Phoenix and LiveView versions (mix deps | grep -w 'phoenix\|phoenix_live_view'):

* phoenix 1.8.3 (Hex package) (mix)
  locked at 1.8.3 (phoenix) 36169f95
* phoenix_live_view 1.1.19 (Hex package) (mix)
  locked at 1.1.19 (phoenix_live_view) d5ad357d

• Operating system:

• Windows
• MacOS
• Linux
• Other (please specify):

• Browsers (including version) you attempted to reproduce this bug on (the more the merrier):

Chrome

Actual behavior

HTML5 allows an input to be located outside of a form, so this should be valid HTML:

<input
  form="my-form"
  phx-debounce="500"
  name={@form[:name].name}
  id={@form[:name].id}
  value={@form[:name].value}
  type="text"
/>
<.form for={@form} id="my-form" phx-change="validate" phx-submit="submit">
  <button type="submit" phx-disable-with="Submitting...">Submit</button>
</.form>

In practice, this works – typing into the input triggers validations, submitting the form submits the "name" field properly. However, a JS error gets thrown when submitting the form. It seems harmless - it doesn't break the page as far as I can tell or cause a reload - but I'm not 100% sure.

dom.js:222 Uncaught TypeError: Cannot read properties of null (reading 'phxPrivate')
    at Object.private (dom.js:222:12)
    at Object.incCycle (dom.js:395:31)
    at dom.js:358:20
    at Array.from (<anonymous>)
    at HTMLFormElement.<anonymous> (dom.js:356:19)
private @ dom.js:222
incCycle @ dom.js:395
(anonymous) @ dom.js:358
(anonymous) @ dom.js:356

This error only shows up when using both a form attribute and using phx-debouce

Single-file reproduction. https://gist.github.com/dmarkow/e0d66ca0910b34d26eafe16a67cd159b

Expected behavior