<vscode-single-select> dropdown stays open when webview loses focus #546
Description
When multiple webviews are open, clicking a <vscode-single-select> opens its dropdown, but clicking into another webview (or anywhere outside the current one) doesn’t close it.
Expected:
The dropdown closes like with the native <select>
Version: eda2fab
In VS Code:
Screen.Recording.2025-10-09.at.10.09.43.mov
Sample:
Screen.Recording.2025-10-09.at.10.10.36.mov
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>VSCode Elements</title>
<link
rel="stylesheet"
href="/node_modules/@vscode/codicons/dist/codicon.css"
id="vscode-codicon-stylesheet"
>
<script
type="module"
src="/node_modules/@vscode-elements/webview-playground/dist/index.js"
></script>
<script type="module" src="/dist/main.js"></script>
<script>
const logEvents = (selector, eventType) => {
document.querySelector(selector).addEventListener(eventType, (ev) => {
console.log(ev);
});
};
</script>
</head>
<body>
<h1>SingleSelect does not close on iframe blur demo</h1>
<main>
<vscode-demo></vscode-demo>
</main>
</main>
<hr />
<h2>Iframe blur repro</h2>
<iframe id="wv" style="width:500px;height:200px;border:1px solid #aaa;"></iframe>
<script>
const iframe = document.getElementById('wv');
const src =
'<!doctype html><html><head>' +
'<meta charset="UTF-8">' +
'<link rel="stylesheet" href="/node_modules/@vscode/codicons/dist/codicon.css">' +
'<script type="module" src="/dist/main.js"></scr' + 'ipt>' +
'<style>body{font-family:sans-serif;padding:12px}</style>' +
'</head><body>' +
'<vscode-single-select placeholder="Pick one">' +
'<vscode-option>One</vscode-option>' +
'<vscode-option selected>Two</vscode-option>' +
'<vscode-option>Three</vscode-option>' +
'</vscode-single-select>' +
'<p style="font-size:smaller;color:#666;">Click outside the iframe to see if dropdown closes.</p>' +
'</body></html>';
iframe.srcdoc = src;
</script>
</body>
</html>Update:
As a workaround, one can add a listener to the iframe that listens for window.blur and document.visibilitychange === 'hidden' and closes any open <vscode-single-select>
Diff:
31d30
< </main>
33,34c32,36
< <h2>Iframe blur repro</h2>
< <iframe id="wv" style="width:500px;height:200px;border:1px solid #aaa;"></iframe>
---
> <h2>Iframe blur repro (WORKAROUND ONLY)</h2>
> <p>This example includes a minimal script that closes the dropdown when the iframe (webview) loses focus or becomes hidden.</p>
>
> <iframe id="wv-fix" style="width:500px;height:220px;border:1px solid #4caf50;"></iframe>
>
36,51c38,74
< const iframe = document.getElementById('wv');
< const src =
< '<!doctype html><html><head>' +
< '<meta charset="UTF-8">' +
< '<link rel="stylesheet" href="/node_modules/@vscode/codicons/dist/codicon.css">' +
< '<script type="module" src="/dist/main.js"></scr' + 'ipt>' +
< '<style>body{font-family:sans-serif;padding:12px}</style>' +
< '</head><body>' +
< '<vscode-single-select placeholder="Pick one">' +
< '<vscode-option>One</vscode-option>' +
< '<vscode-option selected>Two</vscode-option>' +
< '<vscode-option>Three</vscode-option>' +
< '</vscode-single-select>' +
< '<p style="font-size:smaller;color:#666;">Click outside the iframe to see if dropdown closes.</p>' +
< '</body></html>';
< iframe.srcdoc = src;
---
> (function(){
> const iframe = document.getElementById('wv-fix');
> const src =
> '<!doctype html><html><head>' +
> '<meta charset="UTF-8">' +
> '<link rel="stylesheet" href="/node_modules/@vscode/codicons/dist/codicon.css">' +
> '<script type="module" src="/dist/main.js"></scr' + 'ipt>' +
> '<style>body{font-family:sans-serif;padding:12px}</style>' +
> '</head><body>' +
> '<h3 style="margin:0 0 8px;">Workaround: close on blur/visibilitychange</h3>' +
> '<vscode-single-select id="sel" placeholder="Pick one">' +
> '<vscode-option>One</vscode-option>' +
> '<vscode-option selected>Two</vscode-option>' +
> '<vscode-option>Three</vscode-option>' +
> '</vscode-single-select>' +
> '<p style="font-size:smaller;color:#666;">Open dropdown, then click outside the iframe — it should close.</p>' +
> '<script>' +
> '(function(){' +
> 'function closeAll(){' +
> 'var list=document.querySelectorAll(\"vscode-single-select\");' +
> 'list.forEach(function(el){' +
> 'try{' +
> 'if(typeof el.close===\"function\"){ el.close(); }' +
> 'if(\"open\" in el){ el.open=false; }' +
> 'el.removeAttribute(\"open\");' +
> '}catch(e){}' +
> '});' +
> '}' +
> 'window.addEventListener(\"blur\", closeAll);' +
> 'document.addEventListener(\"visibilitychange\", function(){' +
> 'if(document.visibilityState===\"hidden\"){ closeAll(); }' +
> '});' +
> '})();' +
> '</scr' + 'ipt>' +
> '</body></html>';
> iframe.srcdoc = src;
> })();