mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-15 02:11:05 +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 */
export let ref = null;
import { createEventDispatcher } from "svelte";
import { createEventDispatcher, onDestroy, onMount } from "svelte";
import WarningFilled from "../icons/WarningFilled.svelte";
import WarningAltFilled from "../icons/WarningAltFilled.svelte";
import {
@ -148,15 +148,27 @@
const dispatchSelect = () => {
dispatch("select", { selectedId, selectedItem });
};
</script>
<svelte:window
on:click="{({ target }) => {
const pageClickHandler = ({ target }) => {
if (open && ref && !ref.contains(target)) {
open = false;
}
}}"
/>
};
onMount(() => {
if (parent) {
parent.addEventListener("click", pageClickHandler);
}
});
onDestroy(() => {
if (parent) {
parent.removeEventListener("click", pageClickHandler);
}
});
</script>
<svelte:window on:click="{pageClickHandler}" />
<div
class:bx--dropdown__wrapper="{true}"
@ -182,10 +194,11 @@
size="{size}"
name="{name}"
aria-label="{$$props['aria-label']}"
class="bx--dropdown {direction === 'top' && 'bx--list-box--up'} {invalid &&
'bx--dropdown--invalid'} {!invalid &&
warn &&
'bx--dropdown--warning'} {open && 'bx--dropdown--open'}
class="bx--dropdown
{direction === 'top' && 'bx--list-box--up'}
{invalid && 'bx--dropdown--invalid'}
{!invalid && warn && 'bx--dropdown--warning'}
{open && 'bx--dropdown--open'}
{size === 'sm' && 'bx--dropdown--sm'}
{size === 'xl' && 'bx--dropdown--xl'}
{inline && 'bx--dropdown--inline'}