Recently, I ran into a problem triggering a popup when a select element had been clicked. In Safari, the click event does not trigger until one of the options have been clicked. After Google-ing the issue, I found a solution.

Binding the function to the focus event does the trick! But, if we want to display something over the select element, this does not work. As shown in this JSFiddle, the dropdown is displayed over the pop-up:

Note: This occurs in every browser.

Luckily, there is a way to get around this. By using jQuery’s clone and replaceWith methods, we can clone and then replace the select element with itself after it has been clicked:

And that’s it! Again, this is only useful if you would like to display a popup after a select element has been clicked in WebKit browsers.

Let me know if you have any other solutions or thoughts.