Test automation engineers frequently inspect web elements using the browser Dev Tools (F12) window “Elements” tab 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.
In order to prevent this happening, open Dev Tools, select the “Event Listeners” tab (next to the “Styles” and “Layout” tabs in Chrome) and then 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 Dev Tools 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), then find & check the “Emulate a focused page” option.
I hope this has been useful!