toolbar: work around tooltip bugs

This works around several bugs where tooltips don't close when expected.

Fixes: https://github.com/pybricks/pybricks-code/issues/275

src/toolbar/ActionButton.tsx

@@ -13,6 +13,7 @@ import { Tooltip2 } from '@blueprintjs/popover2';
 import { useI18n } from '@shopify/react-i18n';
 import React, { useEffect, useMemo, useState } from 'react';
 import { tooltipDelay } from '../app/constants';
+import { closeTooltip2, useTooltip2MonkeyPatch } from '../utils/monkey-patch';
 import { TooltipId } from './i18n';
 import en from './i18n.en.json';
 
@@ -90,22 +91,29 @@ const ActionButton: React.FC<ActionButtonProps> = (props) => {
 
     useHotkeys(hotkeys);
 
+    const tooltipRef = useTooltip2MonkeyPatch();
+
     return (
         <Tooltip2
+            ref={tooltipRef}
             content={tooltipText}
             placement="bottom"
             hoverOpenDelay={tooltipDelay}
             renderTarget={({
-                ref: tooltipRef,
+                ref: tooltipTargetRef,
                 isOpen: _tooltipIsOpen,
-                ...tooltipProps
+                ...tooltipTargetProps
             }) => (
                 <Button
-                    elementRef={tooltipRef as IRef<HTMLButtonElement>}
-                    {...tooltipProps}
+                    elementRef={tooltipTargetRef as IRef<HTMLButtonElement>}
+                    {...tooltipTargetProps}
                     intent={Intent.PRIMARY}
-                    // prevent focus from mouse click
-                    onMouseDown={(e) => e.preventDefault()}
+                    onMouseDown={(e) => {
+                        // prevent focus from mouse click
+                        e.preventDefault();
+                        // close/prevent tooltip
+                        closeTooltip2(tooltipRef);
+                    }}
                     onClick={() => props.onAction()}
                     disabled={props.enabled === false}
                     style={

src/toolbar/OpenFileButton.tsx

@@ -7,11 +7,11 @@ import { useI18n } from '@shopify/react-i18n';
 import React, { useEffect, useState } from 'react';
 import { useDropzone } from 'react-dropzone';
 import { tooltipDelay } from '../app/constants';
+import { closeTooltip2, useTooltip2MonkeyPatch } from '../utils/monkey-patch';
 import { TooltipId } from './i18n';
 import en from './i18n.en.json';
 
 const smallScreenThreshold = 700;
-
 export interface OpenFileButtonProps {
     /** A unique id for each instance. */
     readonly id: string;
@@ -91,8 +91,11 @@ const OpenFileButton: React.FC<OpenFileButtonProps> = (props) => {
         },
     });
 
+    const tooltipRef = useTooltip2MonkeyPatch();
+
     return (
         <Tooltip2
+            ref={tooltipRef}
             content={i18n.translate(
                 props.tooltip,
                 props.tooltip === TooltipId.FlashProgress
@@ -107,23 +110,27 @@ const OpenFileButton: React.FC<OpenFileButtonProps> = (props) => {
             placement="bottom"
             hoverOpenDelay={tooltipDelay}
             renderTarget={({
-                ref: tooltipRef,
+                ref: tooltipTargetRef,
                 isOpen: _tooltipIsOpen,
-                ...tooltipProps
+                ...tooltipTargetProps
             }) => (
                 <Button
                     {...getRootProps({
                         refKey: 'elementRef',
-                        elementRef: tooltipRef as IRef<HTMLButtonElement>,
-                        ...tooltipProps,
+                        elementRef: tooltipTargetRef as IRef<HTMLButtonElement>,
+                        ...tooltipTargetProps,
                         intent: Intent.PRIMARY,
                         disabled: props.enabled === false,
                         style:
                             props.enabled === false
                                 ? { pointerEvents: 'none' }
                                 : undefined,
-                        // prevent focus from mouse click
-                        onMouseDown: (e) => e.preventDefault(),
+                        onMouseDown: (e) => {
+                            // prevent focus from mouse click
+                            e.preventDefault();
+                            // close/prevent tooltip
+                            closeTooltip2(tooltipRef);
+                        },
                         onClick: props.onClick,
                     })}
                 >