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

[pkc112]

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

• Bug report. If you’ve found a bug, you must provide a minimal example in a CodePen,
  https://codepen.io/code-prashant/pen/RwgPaQV?editors=101.

[marcandre]

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]

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.