Skip to content

Instantly share code, notes, and snippets.

@bengfarrell

bengfarrell/gist:6b2d9ef5411b4612bff43f3a0c559618

Created February 27, 2020 06:58
Show Gist options
  • Save bengfarrell/6b2d9ef5411b4612bff43f3a0c559618 to your computer and use it in GitHub Desktop.
Save bengfarrell/6b2d9ef5411b4612bff43f3a0c559618 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. bengfarrell created this gist Feb 27, 2020.
    41 changes: 41 additions & 0 deletions gistfile1.txt
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,41 @@
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Test</title>
    <script type="module">
    import {Theme} from "@spectrum-web-components/theme/lib/index";
    import {OverlayTrigger} from "@spectrum-web-components/overlay/lib/index";
    import {Popover} from "@spectrum-web-components/popover/lib/index";
    import {Button} from "@spectrum-web-components/button/lib/index";
    import {render, html} from 'lit-html';

    export default class BugRepro extends HTMLElement {
    connectedCallback() {
    this.attachShadow( {mode: "open"});
    render(html`<p>Click the "popopen" button to open the popup. Then click "click me" to open a file dialog. Choose a file or cancel. Now, the popup no longer opens</p>
    <overlay-trigger id="trigger" placement="bottom" offset="0">
    <sp-action-button slot="trigger" quiet>+POPOPEN+</sp-action-button>
    <sp-popover dialog slot="click-content" direction="bottom" open>
    <button @click=${e => this.shadowRoot.querySelector('input').click()}>click me</button>
    </sp-popover>
    </overlay-trigger>
    <input style="display: none" type="file" id="file-upload" multiple accept="image/*">`, this.shadowRoot);
    }
    }

    customElements.define('bug-repro', BugRepro);
    </script>
    <script>
    window.process = window.process || {};
    window.process.env = window.process.env || {};
    window.process.env.NODE_ENV = window.process.env.NODE_ENV || 'production';
    </script>

    </head>
    <body>

    <bug-repro></bug-repro>

    </body>
    </html>