Test automation engineers frequently inspect web elements using the “Elements” tab of a browser’s Dev Tools like Chrome DevTools to discover the ID or other attributes needed to locate them in their test scripts. However many modern frameworks like React can make this difficult because the elements can disappear when the mouse moves into the Dev Tools window to navigate and find them. This is most commonly seen in disappearing drop down menus (select boxes) – the menu pops up but when you move the mouse away it collapses again.
Prevent this from happening by opening Dev Tools and selecting the “Event Listeners” tab (next to the “Styles” and “Layout” tabs in Chrome). Remove anything in the blur and focusout events. Once the menu or select boxes are opened, when you then try to locate them in the “Elements” tab in DevTools they won’t disappear.
If that doesn’t work then you could try the following. In Chrome, press F12 to open the developer console. Click on Settings (cogwheel icon) and then find & check the “Emulate a focused page” option.
I hope this has been useful, showing you how to disable the JavaScript that causes the disappearing drop down menu.