Fixing the drag-click issue when clicking outside a modal to set open to false in Alpine.js
How to fix the drag issue when using @click.outside="open = false" in Alpine.js. When working on modal windows, many examples use @click.outside. But the proble
GGAMI
How to fix the drag issue when using @click.outside="open = false" in Alpine.js.
When working on modal windows, many examples use @click.outside. But the problem is that, when doing this, if you drag from an input in the modal and accidentally release the mouse button outside the modal area, the outside event fires and the modal closes.
To solve this problem, you need to set the event
@mousedown.self="open = false" on the div outside the modal.
This way, you can prevent the modal from closing when a drag results in a click outside the area.