fix(tooltip): close tooltip on mousedown event

- remove blur event from tooltip; stop click, mouse propagation on tooltip content
- remove tabindex from open tooltip to prevent outline ring
- refocus trigger icon or trigger text when closing
- remove useless programmatic variable
This commit is contained in:
Eric Liu 2020-12-06 04:50:08 -08:00
commit 65f85452ed

View file

@ -68,8 +68,6 @@
const dispatch = createEventDispatcher(); const dispatch = createEventDispatcher();
let programmatic = true;
function onKeydown(e) { function onKeydown(e) {
if (e.key === "Escape") { if (e.key === "Escape") {
e.stopPropagation(); e.stopPropagation();
@ -88,15 +86,9 @@
} }
function openMenu() { function openMenu() {
programmatic = false;
open = true; open = true;
} }
function closeMenu() {
programmatic = false;
open = false;
}
afterUpdate(() => { afterUpdate(() => {
if (open) { if (open) {
const button = ref.getBoundingClientRect(); const button = ref.getBoundingClientRect();
@ -167,8 +159,14 @@
</script> </script>
<svelte:body <svelte:body
on:click="{({ target }) => { on:mousedown="{({ target }) => {
if (!programmatic && open && refTooltip && !refTooltip.contains(target)) { if (open && target.contains(refTooltip)) {
if (refIcon) {
refIcon.focus();
} else if (ref) {
ref.focus();
}
open = false; open = false;
} }
}}" /> }}" />
@ -206,7 +204,6 @@
<div <div
bind:this="{refTooltip}" bind:this="{refTooltip}"
role="tooltip" role="tooltip"
tabindex="0"
id="{tooltipId}" id="{tooltipId}"
data-floating-menu-direction="{direction}" data-floating-menu-direction="{direction}"
class:bx--tooltip="{true}" class:bx--tooltip="{true}"
@ -218,10 +215,11 @@
class:bx--tooltip--align-center="{align === 'center'}" class:bx--tooltip--align-center="{align === 'center'}"
class:bx--tooltip--align-start="{align === 'start'}" class:bx--tooltip--align-start="{align === 'start'}"
class:bx--tooltip--align-end="{align === 'end'}" class:bx--tooltip--align-end="{align === 'end'}"
on:blur="{closeMenu}"
> >
<span class:bx--tooltip__caret="{true}"></span> <span class:bx--tooltip__caret="{true}"></span>
<div <div
on:click|stopPropagation
on:mousedown|stopPropagation
class:bx--tooltip__content="{true}" class:bx--tooltip__content="{true}"
tabIndex="-1" tabIndex="-1"
role="dialog" role="dialog"