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

fix(dropdown): close when user clicks outside iframe (#1596)

Browse source 
* `Dropdown` click outside
Fixes #1595

* `onDestroy` we want to remove the event listener
to prevent listeners hanging
This commit is contained in:
Jonathan Quintin 2023-01-17 20:57:50 -05:00 • committed by GitHub
commit 73aa6e216a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 23 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

33
src/Dropdown/Dropdown.svelte
View file

@ -98,7 +98,7 @@
/** Obtain a reference to the button HTML element */ /** Obtain a reference to the button HTML element */
export let ref = null; export let ref = null;
import { createEventDispatcher } from "svelte"; import { createEventDispatcher, onDestroy, onMount } from "svelte";
import WarningFilled from "../icons/WarningFilled.svelte"; import WarningFilled from "../icons/WarningFilled.svelte";
import WarningAltFilled from "../icons/WarningAltFilled.svelte"; import WarningAltFilled from "../icons/WarningAltFilled.svelte";
import { import {
@ -148,15 +148,27 @@
const dispatchSelect = () => { const dispatchSelect = () => {
dispatch("select", { selectedId, selectedItem }); dispatch("select", { selectedId, selectedItem });
}; };
</script>
<svelte:window const pageClickHandler = ({ target }) => {
on:click="{({ target }) => {
if (open && ref && !ref.contains(target)) { if (open && ref && !ref.contains(target)) {
open = false; open = false;
} }
}}" };
/>
onMount(() => {
if (parent) {
parent.addEventListener("click", pageClickHandler);
}
});
onDestroy(() => {
if (parent) {
parent.removeEventListener("click", pageClickHandler);
}
});
</script>
<svelte:window on:click="{pageClickHandler}" />
<div <div
class:bx--dropdown__wrapper="{true}" class:bx--dropdown__wrapper="{true}"
@ -182,10 +194,11 @@
size="{size}" size="{size}"
name="{name}" name="{name}"
aria-label="{$$props['aria-label']}" aria-label="{$$props['aria-label']}"
class="bx--dropdown {direction === 'top' && 'bx--list-box--up'} {invalid && class="bx--dropdown
'bx--dropdown--invalid'} {!invalid && {direction === 'top' && 'bx--list-box--up'}
warn && {invalid && 'bx--dropdown--invalid'}
'bx--dropdown--warning'} {open && 'bx--dropdown--open'} {!invalid && warn && 'bx--dropdown--warning'}
{open && 'bx--dropdown--open'}
{size === 'sm' && 'bx--dropdown--sm'} {size === 'sm' && 'bx--dropdown--sm'}
{size === 'xl' && 'bx--dropdown--xl'} {size === 'xl' && 'bx--dropdown--xl'}
{inline && 'bx--dropdown--inline'} {inline && 'bx--dropdown--inline'}