mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-18 03:26:36 +00:00
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:
parent
3214d8563f
commit
65f85452ed
1 changed files with 10 additions and 12 deletions
|
@ -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"
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue