Blur and mousedown conflict - slidetoggled div is not closing

https://codepen.io/vlrstea/pen/xWXwYw

I have a div, with an input inside it, which default is display none, the div slides down( slidetoggle() ) when a “button” is clicked. The button has a mousedown event.
The input has a blur event.

Everything works fine, except when the slide is down and you press the button. When you press the button, it triggers both events. Which makes the slide to cloes and open again.

How can I prevent this behavior?

I’m not a JavaScript expert, but it seems to me it would be easier for the experts to be able to tell what is causing the problem if you post the code. And please make sure to format your code here with three backticks (`) on the line before the code, and three backticks on the line after, to make it easier to read.

Someone helped me already.
I will update the codepen.

But basically, the input focus is set after the parent is visible(css pseudo selector) and in the blur callback you set a condition which triggers the slidetoggle only if the target is not animated.

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.