jQuery('select:focus').blur() isn't working in Safari and Edge

Question

We have a page in our website where we display an Overlay form 5 seconds after the page has loaded. If we click on any select element in the page to expand within the span of 5 seconds and wait for the Overlay form to show up, then the expanded select element overlaps with the Overlay form. The design really doesn't look good.

In order to fix that, we put in a line of code to trigger the blur event on any focused select element which closes the expanded select element. This is worked fine in Chrome, Firefox, and Internet Explorer, but not in Safari and Edge. I've tried to fix this by putting several hacks, but none of them worked fine. Any help would be greatly appreciated!

var showOverlayForm = function () {
    setTimeout(function () {
        // Do something after 5 seconds
        // ANIMATE the overlay form.
        $('select:focus').blur(); //close any open select drop down 
    }, 5000);
};

Answer 1

You can notice that when user select the dropdown control then it adds class=focused .

You can try to use .toggleClass() and try to remove that class may help you to solve the issue.

Reference:

.toggleClass()

or you can try to display any message on screen for 5 seconds or show any progress bar to engage the user for 5 seconds.

Answer 2

I put in the following hack and it's working fine in IE, but not in Safari.

var $select =  $('select:focus');
var $newSelect = $select.clone();
$select.insertBefore($newSelect);
$select.remove();

Any thoughts/suggestions?