Fix events race condition preventing BlockToolbar closing

Author: thibaudcolas

src/components/Toolbar/BlockToolbar/BlockToolbar.tsx

@@ -144,7 +144,7 @@ const BlockToolbar = ({
     <div className="Draftail-BlockToolbar" ref={toolbarRef}>
       <Tooltip
         shouldOpen={visible}
-        onHide={() => setVisible(false)}
+        onClickOutside={() => setVisible(false)}
         placement={comboPlacement}
         zIndex={tooltipZIndex}
         showBackdrop={showBackdrop}
@@ -179,7 +179,7 @@ const BlockToolbar = ({
           className="Draftail-BlockToolbar__trigger"
           style={{ top: focusOffset }}
           aria-label={triggerLabel}
-          onClick={() => setVisible(true)}
+          onClick={() => setVisible(!visible)}
         >
           {triggerIcon}
         </button>

src/components/Tooltip/Tooltip.tsx

@@ -68,6 +68,7 @@ export interface TooltipProps {
   zIndex?: number;
   placement?: TooltipPlacement;
   onHide?: () => void;
+  onClickOutside?: () => void;
   onMount?: (instance: PopperInstance) => void;
 }
 
@@ -80,6 +81,7 @@ const Tooltip = ({
   zIndex = 100,
   placement = "top" as TooltipPlacement,
   onHide,
+  onClickOutside,
   onMount,
 }: TooltipProps) => {
   const parentRef = useRef<HTMLDivElement>(null);
@@ -121,7 +123,7 @@ const Tooltip = ({
         visible={visible}
         interactive
         onHide={onHide}
-        onClickOutside={onHide}
+        onClickOutside={onClickOutside || onHide}
         onMount={onMount}
         placement={placement}
         maxWidth="100%"