Empty popup box shows up randomly and seems it's from jQuery UI dialog

There is an application that is built on a legacy workflow engine which uses AngularJS and jQuery. A blank popup box shows up randomly that we have to close manually. This box shows up mostly when a drop-down box is activated to select an option. This drop-down box is a custom component not a simple HTML options element.

See below sample snapshot and various HTML sections of the related popup box.

I am wondering if there is a method to trace the code that is responsible for generating this box. As per my initial analysis, it is generated by jQuery Dialog UI. I noticed that the CSS of jQuery dialog is not loaded, and that's why you see a basic none formatted box.

Also, if you have any idea how we can kill this box by monitoring changes to the DOM, killing that section on the spot.

Edit: I tried to locate how jQuery and jQuery UI are loaded, but couldn't find a direct way used for loading, instead I found the some references as per the snapshot below. Looks like this application doesn't load the libraries using the header src tags.

I also noticed that when I try to display a simple jQuery Dialog using the console, it will show exactly same as the random popup boxes. When I load the the needed CSS for the jQuery UI from the console, the empty popup box will be formatted according to the example. Is it possible that this problem is caused by the missing CSS for this library?

I traced the source code for jquery ui using the network tab and all the loaded sources, and looked for the file on the server, and only found one under some cache folder which is not related C:\Users\user-account\AppData\Local\Microsoft\Windows\INetCache\IE\YNOIZ1xyz\vengine-xyz[1].js. I also didn't find the path of the folder on the server based on the network tab. See the related screenshot below. So how this file is loaded with the website sources?

I appreciate your help.

Tarek

<div tabindex="-1" role="dialog" style="position: relative; height: auto; width: 300px; top: -396px; left: 589px; display: block;" class="ui-dialog ui-corner-all ui-widget ui-widget-content ui-front ui-draggable ui-resizable" aria-describedby="ui-id-9" aria-labelledby="ui-id-10"><div class="ui-dialog-titlebar ui-corner-all ui-widget-header ui-helper-clearfix ui-draggable-handle"><span id="ui-id-10" class="ui-dialog-title">&nbsp;</span><button type="button" class="ui-button ui-corner-all ui-widget ui-button-icon-only ui-dialog-titlebar-close" title="Close"><span class="ui-button-icon ui-icon ui-icon-closethick"></span><span class="ui-button-icon-space"> </span>Close</button></div><div e-dialog="'selectDashboardDialog'" e-dialog-title="selectDashboard.title" e-dialog-desc="selectDashboard.desc" options="{dialogClass:'selectDashboardDialog', width: 'auto', draggable:false, position: 'lef top'}" class="width100 ng-scope ui-dialog-content ui-widget-content" e-select-dashboard-pane="" id="ui-id-9" style="display: block; width: auto; min-height: 109px; max-height: none; height: auto;"></div><div class="ui-resizable-handle ui-resizable-n" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-e" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-s" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-w" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-sw" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-ne" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-nw" style="z-index: 90;"></div></div>

<div tabindex="-1" role="dialog" style="position: relative; height: auto; width: 300px; top: -396px; left: 589px; display: block;" class="ui-dialog ui-corner-all ui-widget ui-widget-content ui-front ui-draggable ui-resizable" aria-describedby="ui-id-12" aria-labelledby="ui-id-13"><div class="ui-dialog-titlebar ui-corner-all ui-widget-header ui-helper-clearfix ui-draggable-handle"><span id="ui-id-13" class="ui-dialog-title">&nbsp;</span><button type="button" class="ui-button ui-corner-all ui-widget ui-button-icon-only ui-dialog-titlebar-close" title="Close"><span class="ui-button-icon ui-icon ui-icon-closethick"></span><span class="ui-button-icon-space"> </span>Close</button></div><div e-dialog="'selectDashboardDialog'" e-dialog-title="selectDashboard.title" e-dialog-desc="selectDashboard.desc" options="{dialogClass:'selectDashboardDialog', width: 'auto', draggable:false, position: 'lef top'}" class="width100 ng-scope ui-dialog-content ui-widget-content" e-select-dashboard-pane="" id="ui-id-12" style="display: block; width: auto; min-height: 109px; max-height: none; height: auto;"></div><div class="ui-resizable-handle ui-resizable-n" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-e" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-s" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-w" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-sw" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-ne" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-nw" style="z-index: 90;"></div></div>

<div tabindex="-1" role="dialog" class="ui-dialog ui-corner-all ui-widget ui-widget-content ui-front ui-draggable ui-resizable" aria-describedby="ui-id-71" aria-labelledby="ui-id-72" style="position: relative;height: auto;width: 300px;top: -1245px;left: 338.5px;display: block;"><div class="ui-dialog-titlebar ui-corner-all ui-widget-header ui-helper-clearfix ui-draggable-handle"><span id="ui-id-72" class="ui-dialog-title">&nbsp;</span><button type="button" class="ui-button ui-corner-all ui-widget ui-button-icon-only ui-dialog-titlebar-close" title="Close"><span class="ui-button-icon ui-icon ui-icon-closethick"></span><span class="ui-button-icon-space"> </span>Close</button></div><div e-dialog="'selectDashboardDialog'" e-dialog-title="selectDashboard.title" e-dialog-desc="selectDashboard.desc" options="{dialogClass:'selectDashboardDialog', width: 'auto', draggable:false, position: 'lef top'}" class="width100 ng-scope ui-dialog-content ui-widget-content" e-select-dashboard-pane="" id="ui-id-71" style="display: block; width: auto; min-height: 109px; max-height: none; height: auto;"></div><div class="ui-resizable-handle ui-resizable-n" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-e" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-s" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-w" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-sw" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-ne" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-nw" style="z-index: 90;"></div></div>

Putting the promising approach to find the originating code, which was discussed in comments, as an answer to document it.
First suggestion was to deploy non minified code along with non minified jqueryui and use Developer tools in browser. Set breakpoint in one of the jqueryUI's dialog creation function, like _create: function() or _init methods. And see which one gets hit before the blank dialog is shown. And see the call stack and go down the stack till we reach the application code.

As the issue happens spontaneously it was decided to log the stack trace from JqueryUI library. We can modify the jqueryUI library. Instead of using CDN, download the appropriate version of non minified jqueryUI. Then inside the js file, find widget ui.dialog. And put console.trace(); statement in _create: function(). OR whichever function gets called first. I don't know which one but we can write a small code and find out.

To figure out which version of the library is being used, in browser open developer tools on your application page. In element tabs do ctrl+f then search for jquery-ui. You'll find a tag with the js link. https://i.sstatic.net/fEb3P.png