Invalid querySelector during reconnect

[chadwick-]

Environment

• Elixir version (elixir -v): 1.13.4
• Phoenix version (mix deps): 1.6.12
• Phoenix LiveView version (mix deps): 0.17.11
• Operating system: MacOS
• Browsers you attempted to reproduce this bug on (the more the merrier): Chrome, Safari
• Does the problem persist after removing "assets/node_modules" and trying again? Yes/no: Yes

Actual behavior

the .js method formsForRecovery(html) tries to select existing form elements to recover them after a disconnect.

let newForm = template.content.querySelector(form[id="${form.id}"][${phxChange}="${form.getAttribute(phxChange)}"])

this results in something like: document.querySelector('form[id="myformID"][phx-change="[["push",{"event":"update","target":1}]]"]'); which is an invalid selector. The special characters need escaping. This works... document.querySelector('form[id="myformID"][phx-change="\\[\\[\\"push\\"\\,\\{\\"event\\"\\:\\"update\\"\\,\\"target\\"\\:1\\}\\]\\]"]');

Of note, I have several forms on the page - not sure if a single form would suffer from this but I think so?

Expected behavior

When there is a connection issue, I would expect to see the WebSocket errors, but not the querySelector problem.

I think this would work (it's quieting errors for me, at least): let newForm = template.content.querySelector(form[id="${form.id}"][${phxChange}="${CSS.escape(form.getAttribute(phxChange))}"])