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

user_1439143 0
Viewed 956

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?

onblur web-inspector javascript
3 Answers

I you need it just for inspection you can add open attribute to Autocomplete element.

<Autocomplete
   ...
   open
/>
user_91857990

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

user_156102690

If it is just to inspect in dev tools, you can force the element behavior to focus and then inspect away on that basis.

user_141529890
Related