You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
If a Tooltip with an auto-focused element is positioned e.g. at the bottom edge of the document, clicking it can cause the button that opens the tooltip to move away from the cursor. This then causes the Tooltip to close again immediately.
Could be a browser bug. Tested on Windows 10 in Chrome and Firefox. Chrome had the issue, Firefox did not.
In general, button clicks should trigger when releasing the mouse.
Is there a good reason why it uses mousedown rather than a click here? I suspect it has to do with the focus...
Keeping the mouse-down behavior, switching to pointer events and using pointer capture would help here; could possibly have unintended side effects, though:
- function onMousedown() {+ function onPointerdown(e) {+ e.currentTarget.setPointerCapture(e.pointerId);
// 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;
});
}
+ function onPointerup(e) {+ e.currentTarget.releasePointerCapture(e.pointerId);+ }
...
{#if !hideIcon}
<div bind:this="{ref}" id="{triggerId}" class:bx--tooltip__label="{true}">
<slot name="triggerText">{triggerText}</slot>
<div
bind:this="{refIcon}"
{...buttonProps}
aria-describedby="{tooltipId}"
- on:mousedown="{onMousedown}"+ on:pointerdown="{onPointerdown}"+ on:pointerup="{onPointerup}"
on:focus="{onFocus}"
on:keydown="{onKeydown}"
>
<slot name="icon">
<svelte:component this="{icon}" name="{iconName}" />
</slot>
</div>
</div>
{:else}
<div
bind:this="{ref}"
{...buttonProps}
aria-describedby="{tooltipId}"
- on:mousedown="{onMousedown}"+ on:pointerdown="{onPointerdown}"+ on:pointerup="{onPointerup}"
on:focus="{onFocus}"
on:blur="{onBlur}"
on:keydown="{onKeydown}"
>
<slot name="triggerText">{triggerText}</slot>
</div>
{/if}
The text was updated successfully, but these errors were encountered:
If a Tooltip with an auto-focused element is positioned e.g. at the bottom edge of the document, clicking it can cause the button that opens the tooltip to move away from the cursor. This then causes the Tooltip to close again immediately.
Could be a browser bug. Tested on Windows 10 in Chrome and Firefox. Chrome had the issue, Firefox did not.
Repro REPL
In general, button clicks should trigger when releasing the mouse.
Is there a good reason why it uses
mousedown
rather than aclick
here? I suspect it has to do with the focus...Keeping the mouse-down behavior, switching to pointer events and using pointer capture would help here; could possibly have unintended side effects, though:
The text was updated successfully, but these errors were encountered: