Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

I am using popup.focus() to focus a popup window after a button is clicked. The focus() is working fine for all the browsers except for ****EDGE**** browser. The issue I am facing is intermittent. At times I am able to view the popup window (child popup dialog box) on the browser and at times behind the browser i.e. on the desktop and I am able to identify that the popup is open by the flashing on the task bar.

Any suggestion would be really appreciated.

var popup = new PopupWind(url,'config')
popup.setFeature('height', height)
popup.setFeature('resizable', 'no')
popup.setFeature('scrollbars', 'no')
popup.setFeature('left', xLoc) // IE
popup.setFeature('top', yLoc)
popup.setFeature('screenx', xLoc) // NS
popup.setFeature('screeny', yLoc)  
popup.open()
popup.focus();
I tried using this to make focus() work in EDGE but it did not    
popup.blur();
setTimeout( popup.focus,0); 
Please open link with the solution in your Edge browser
https://codepen.io/PocketNinjaDesign/pen/OgbQXO
The window wasn't focusing intermittently!
The issue is that you need to mess with the focus of the page.  if you open a popup and then focus on the parent page, then move the parent page even just 1 pixel.  Clicking the button will focus on the popup again.
So for a crippled web browser where window methods don't seem to work what can you do other than wait for a few years for them to fix their focus() bug.
Well, the hack is to remove the focus from the parent window by generating a temp empty popup window.  Then focusing on the main popup and closing the temp popup.  All wrapped by a setTimeout @ 300ms, any lower and it didn't seem to work for me.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div id="button" class="bttn">Open Popup</div>
<div id="focus" class="bttn focus">Focus on Popup</div>
JAVASCRIPT
// This is the main guts of this page!
var isMSEdge = function() {
  return window.navigator.userAgent.toLowerCase().indexOf('edge') > -1;
$(function() {
  var $bttn = $('#button');
  var $focusBttn = $('#focus');
  var tempWin;
  var testWindow;
  $bttn.on('click', function() {
    testWindow = window.open('', "pocketninja", "width=300, height=300");
    $focusBttn.show();
    $(this).hide();
  $focusBttn.on('click', function() {
    if(testWindow && isMSEdge()) {
        tempWin = window.open('', 'temp', 'width=1, height=1');
        setTimeout(function() {
          testWindow.focus();
          tempWin.close();
        }, 300);   
    else {
      testWindow.focus();
        
Thanks for contributing an answer to Stack Overflow!
Please be sure to answer the question. Provide details and share your research!
But avoid …
Asking for help, clarification, or responding to other answers.
Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.