Tooltip can close immediately after opening when focus causes a layout change

[brunnerh]

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 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}