Hello everyone!
So I was working with Sortablejs in a project and this error was always being shown when I moved any draggable item:
Error: dispatching a custom change event is only supported on input elements inside a form
bindForms live_socket.js:851
on live_socket.js:934
W sortable.js:2
U sortable.js:2
A2 sortable.js:2
_onDragOver sortable.js:2
handleEvent sortable.js:2
functors lockdown-install.js:1
W sortable.js:2
U sortable.js:2
A2 sortable.js:2
_onDragOver sortable.js:2
handleEvent sortable.js:2
I have tried pretty much everything I know (which probably isn’t much XD) and the problem was still there. So I tried going to Chris Mccord todo_trek app that he showed off in one of the ElixirConfs, which he also used in the Sortablejs library. And the error did not show up (what a surprise)… So I thought that it was definitely my skill issue. After spending a day on this I gave up trying to fix my stuff and started trying to get the same error on the todo_trek, which I couldn’t… That’s when I tried to move the todo_trek to my app, I copied literally everything, and… the error showed up. And that was when I got super confused. While talking with a friend about this he suggested checking the versions of the liveview. Well, they were different… So I tried upgrading the todo_trek app from Chris Mccord from 0.2 to the newest one at the moment “~> 1.0.0-rc.7”. And guess what, the error showed up.
I tried tracing the version where this problem started happening and found out it was on version “~> 1.0.0-rc.0”. After this, I tried to follow the error message, so I went to liveviews repo and went to line 851 on the live_socket.js file.
if(e instanceof CustomEvent && e.target.form === undefined){
// throw on invalid JS.dispatch target and noop if CustomEvent triggered outside JS.dispatch
if(e.detail && e.detail.dispatcher){
throw new Error(`dispatching a custom ${type} event is only supported on input elements inside a form`)
}
return
}
Now I kinda don’t know what to do. Is it a liveview problem or a sortablejs problem?
