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
Overlay Trigger Bug
Raw
gistfile1.txt
<!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment