onclick() and onblur() ordering issue

Question

I have an input field that brings up a custom drop-down menu. I would like the following functionality:

• When the user clicks anywhere outside the input field,

Answer 1

I was having the exact same issue as you, my UI is designed exactly as you describe. I solved the problem by simply replacing the onClick for the menu items with an onMouseDown. I did nothing else; no onMouseUp, no flags. This resolved the problem by letting the browser automatically re-order based on the priority of these event handlers, without any additional work from me.

Is there any reason why this wouldn't have also worked for you?