Search code examples
javascriptonblurweb-inspector

Force elements to remain visible on focus change, even when they would disappear on blur


In Material UI, there's an autocomplete. When I focus the input and press up/down, the options are displayed.

I'd like to inspect those options using right click -> Inspect (in Chrome). But as soon as the focus leaves the input, the options disappear (and I can't find them in the DOM), probably because of an onBlur or similar JavaScript event.

https://material-ui.com/components/autocomplete/

Is there a way to keep the options visible, even when the focus leaves the input, so I can inspect their DOM?


Solution

  • In chrome developer tools->Elements tab add a DOM breakpoint on the input element or one of it's parents for attribute modifications (I did it on some parent element). After the event is fired click on resume script execution (or just hit F8) until the dropdown menu appears on the screen but don't finish all script executions, it'll be easier if you remain in debug mode. When the dropdown menu appears simply open the Elements tab again a find the dropdown markup at the bottom of the DOM tree right before the closing </body> tag adding DOM breakpoint (here I did it on some random parent element of the input field) Here we're browsing the generated DOM dropdown while still in debug mode