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

Dropdown click outside

Browse source 
Fixes #1595
This commit is contained in:
jqlio18 2022-12-20 23:12:05 -05:00
commit 890c99def5
1 changed files with 6 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

19
src/Dropdown/Dropdown.svelte
View file

@ -150,14 +150,6 @@
}; };
</script> </script>
<svelte:window
on:click="{({ target }) => {
if (open && ref && !ref.contains(target)) {
open = false;
}
}}"
/>
<div <div
class:bx--dropdown__wrapper="{true}" class:bx--dropdown__wrapper="{true}"
class:bx--list-box__wrapper="{true}" class:bx--list-box__wrapper="{true}"
@ -182,10 +174,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'}
@ -233,7 +226,6 @@
open = false; open = false;
} }
} else if (key === 'Tab') { } else if (key === 'Tab') {
open = false;
ref.blur(); ref.blur();
} else if (key === 'ArrowDown') { } else if (key === 'ArrowDown') {
if (!open) open = true; if (!open) open = true;
@ -245,6 +237,7 @@
open = false; open = false;
} }
}}" }}"
on:blur="{() => (open = false)}"
on:keyup="{(e) => { on:keyup="{(e) => {
const { key } = e; const { key } = e;
if ([' '].includes(key)) { if ([' '].includes(key)) {