mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-14 18:01:06 +00:00
Code Issues Projects Releases Packages Wiki Activity

fix(popover): fire "click:outside" event when clicking sibling elements (#1570)

Browse source
This commit is contained in:
Maxime Fafard 2022-12-07 23:10:45 -05:00 • committed by GitHub
commit 0f8a57b9d2
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 58 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

6
docs/src/COMPONENT_API.json
View file

@ -8908,7 +8908,11 @@
"moduleExports": [],
"slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }],
"events": [
{ "type": "dispatched", "name": "click:outside", "detail": "null" }
{
"type": "dispatched",
"name": "click:outside",
"detail": "{ target: HTMLElement; }"
}
],
"typedefs": [],
"rest_props": { "type": "Element", "name": "div" }

6
docs/src/pages/components/Popover.svx
View file

@ -36,6 +36,12 @@ Set `closeOnOutsideClick` to set `open` to `false` when clicking outside of the
</Popover>
</div>
## Manage open state with a Button
You can bind the `open` prop and manage the open state of the popover with an external button.
<FileSource src="/framed/Popover/WithButton" />
## Popover alignment
Customize the popover alignment using the `align` prop. Valid values include: `"top" | "top-left" | "top-right" | "bottom" | "bottom-left" | "bottom-right" | "left" | "left-bottom" | "left-top" | "right" | "right-bottom" | "right-top"`.

37
docs/src/pages/framed/Popover/WithButton.svelte Normal file
View file

@ -0,0 +1,37 @@
<script>
import { Popover, Button } from "carbon-components-svelte";
let open = true;
let containerRef = null;
</script>
<div data-outline>
<div
bind:this="{containerRef}"
style:position="relative"
style:display="inline-block"
>
<Button on:click="{() => (open = !open)}">Click to open</Button>
<Popover
bind:open
align="bottom-left"
on:click:outside="{({ detail }) => {
console.log('on:click:outside');
if (!containerRef.contains(detail.target)) {
open = false;
}
}}"
>
<div style="padding: var(--cds-spacing-05)">Content</div>
</Popover>
</div>
<div>
<br />
Anim eu laboris veniam in est elit ullamco enim irure id. Lorem est culpa ex
in enim enim. Culpa quis incididunt magna officia et aliqua. Ullamco deserunt
aute enim cupidatat. Culpa quis enim sint sint anim qui irure exercitation labore
occaecat in reprehenderit proident. Nisi laborum ut et amet commodo amet ullamco
commodo non aliqua magna ad eu. Ad aliquip minim nostrud id enim elit velit ullamco
pariatur eu excepteur pariatur cillum.
</div>
</div>