search

guillaumepotier / Parsley.js

Validate your forms, frontend, without writing a single line of javascript
http://parsleyjs.org
MIT License
9.05k stars 1.32k forks source link

using data-parsley-trigger="blur" stop 'click event' from being executed #1360

Open pkc112 opened 2 years ago

pkc112 commented 2 years ago

What kind of issue is this? (put 'x' between the square brackets)

https://codepen.io/code-prashant/pen/RwgPaQV?editors=101

once the codepen loads keep focus in Please enter a palindrome: field now scroll and click on 'click me link'

issue: alert not fired. click again and alert is fired

marcandre commented 2 years ago

Convincing demo, thank you. I agree this is a bug. I've spent 45 minutes in the code trying to figure out the reason and I can't find it.

A shorter demo (no js needed):

<form data-parsley-validate="" data-parsley-focus="none" data-parsley-trigger="blur">
  <label>Click in here first:</label>
  <input type="text" name="s" required="">

  <input type="submit">
</form>
<div onclick="alert('on click filred')">then click me twice</div>

I don't understand how Parsley can be interrupting the click event (it doesn't listen to it). I turned off the auto-focus, just to be sure, same effect.

fmeyertoens commented 2 years ago

This doesn't seem to be a bug. The click event is fired when the mouse is

both pressed and released while the pointer is located inside the element.

https://developer.mozilla.org/en-US/docs/Web/API/Element/click_event Because the validation happens when you click the div and the input loses focus, the appearing error message causes a layout shift. Therefore the mouse isn't released on the div anymore and no click event is fired. You can easily test this by making the div so large that your mouse stays inside it, even when the error message appears. Then the click event is fired and the alert is shown.