diff --git a/src/Tooltip/Tooltip.svelte b/src/Tooltip/Tooltip.svelte index c1583968..b206c869 100644 --- a/src/Tooltip/Tooltip.svelte +++ b/src/Tooltip/Tooltip.svelte @@ -89,10 +89,19 @@ } } - function openMenu() { + function onFocus() { open = true; } + function onMousedown() { + // determine the desired state before the focus event triggers. + const shouldClose = open; + // ensure changes are scheduled at the end, i.e. after the possible focus event. + setTimeout(() => { + open = shouldClose ? false : true; + }); + } + afterUpdate(() => { if (open) { const button = ref.getBoundingClientRect(); @@ -173,8 +182,13 @@ ref.focus(); } } - - open = false; + } + }}" + on:click|capture="{({ target }) => { + if (open && !ref.contains(target) && !refTooltip.contains(target)) { + setTimeout(() => { + open = false; + }); } }}" /> @@ -190,8 +204,8 @@ bind:this="{refIcon}" {...buttonProps} aria-describedby="{tooltipId}" - on:click|preventDefault|stopPropagation="{openMenu}" - on:focus="{openMenu}" + on:mousedown="{onMousedown}" + on:focus="{onFocus}" on:blur="{onBlur}" on:keydown="{onKeydown}" > @@ -205,8 +219,8 @@ bind:this="{ref}" {...buttonProps} aria-describedby="{tooltipId}" - on:click|preventDefault|stopPropagation="{openMenu}" - on:focus="{openMenu}" + on:mousedown="{onMousedown}" + on:focus="{onFocus}" on:blur="{onBlur}" on:keydown="{onKeydown}" >