`<vscode-single-select>` dropdown stays open when webview loses focus

Open dankeboy36 opened this issue 3 months ago • 0 comments

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: eda2fab2

In VS Code:

https://github.com/user-attachments/assets/e8b061a5-8548-4e8e-9ec6-71ef057df0c7

Sample:

https://github.com/user-attachments/assets/0c9870bc-2a8f-4973-9a5f-f2b0ca5ce5f7

<!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;
>   })();

https://github.com/user-attachments/assets/dfe140d8-d4fe-498e-8f38-ca802e63454b

Oct 09 '25 08:10 dankeboy36