强制元素在焦点变化时保持可见，即使它们会在模糊时消失

Question

在 Material UI 中，有一个自动完成功能。当我聚焦输入并按 up/down 时，显示选项。

我想使用右键单击 -> 检查（在 Chrome 中）来检查这些选项。但是一旦焦点离开输入，选项就会消失（我在 DOM 中找不到它们），可能是因为 onBlur 或类似的 JavaScript 事件。

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

有没有办法让选项可见，即使焦点离开输入，这样我就可以检查它们 DOM？

Answer 1

如果只是在开发工具中检查，可以强制元素行为聚焦，然后在此基础上检查。

Answer 2

在 chrome 开发者工具 -> 元素选项卡中，在 input 元素或 attribute modifications 的父元素之一上添加一个 DOM 断点（我在一些父元素）。触发事件后，单击恢复脚本执行（或直接按 F8）直到下拉菜单出现在屏幕上，但不要完成所有脚本执行，如果保持调试模式会更容易。当下拉菜单出现时，只需再次打开“元素”选项卡，在 DOM 树底部的结束 </body> 标记之前找到下拉标记

Answer 3

我只是为了检查需要它，您可以将 open 属性添加到 Autocomplete 元素。

<Autocomplete
   ...
   open
/>

强制元素在焦点变化时保持可见，即使它们会在模糊时消失

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

javascript

onblur

web-inspector