Vue-select: How to force the dropdown to stay open so I can inspect its contents?

[unikitty37]

My option template is not rendering its icons correctly:

However, even with :close-on-select='false', I cannot use my browser's inspector to see what is wrong.

Without this option set, the dropdown closes and removes its items from the DOM as soon as I right-click. With the option set, I can right-click and choose Inspect, but the dropdown closes as soon as I click on anything in the inspector.

How can I configure the dropdown to stay open until the up-caret at top right is explicitly clicked by the user — or how else can I get it to stay open long enough to inspect its contents and actually interact with the inspector?

I am using Vivaldi on macOS.

(Surely it should only close when the user clicks in the actual page, anyway? Clicking on the inspector, or some part other part of the browser chrome, should not cause the dropdown to close any more than clicking in a terminal window should…)

[sagalbot]

The component closes on whenever the text input triggers a blur event. The html select element uses the same pattern.

Use Vue Dev Tools, click on the component to send it to your console. From the console, run:

$vm0.open = false;

[itsoft3g]

For me $vm0.open = true;

Use Vue Dev Tools, click on the component to send it to your console. From the console, run:

$vm0.open = true;

Then go to the Sources tab in the dev tool - pause the script execution you can also try by pressing F8.
Tested with v3.11.2