Possible race condition in live view hook

Phoenix Forum Questions / Help
,
1

Example: https://github.com/syfgkjasdkn/live-dropdown

I have a navbar with a dropdown which has a small form to pick the current dashboard’s date range. When clicking on a checkbox in that form, the dropdown closes, although it shouldn’t close since the checkbox is within the dropdown container.

So far I’ve tracked down the problem to have something to do with liveview patching the checkbox before the dropdown hook’s event listener is called thus making https://github.com/syfgkjasdkn/live-dropdown/blob/master/assets/js/hooks/DropdownHook.js#L25 return false.

2

Demo recording: https://www.dropbox.com/s/wl9y8ndrjq2uo7u/demo-1.mp4?dl=0

3

One more recording showing the debugger and my clicks: https://www.dropbox.com/s/xly21rkk5gpmzli/demo-2.mp4?dl=0

Note that when the breakpoints are enabled, the race condition between live view patching the checkbox and container.contains(event.target) seems to be resolved.

4

Ok, I failed to find the solution to this particular problem so instead I added a div spanning the whole viewport behind the dropdown with a click listener to close the dropdown. Still, I’d love to know what exactly was causing the original problem.

5

The actual problem was due to live view patching the dropdown container with hidden on any event sent from the form (which included checkbox state change).

2 Likes