Don't dismiss tooltips on scroll while focus is inside them

Summary:
Click-triggered tooltips (like the commit filter dropdown) dismiss on any
scroll event outside tooltip content, to avoid lingering after their anchor
moves. But typing into an input inside a tooltip can shrink content elsewhere
on the page (e.g. live-filtering the commit tree), which clamps the scroll
container's `scrollTop` and fires a scroll event — dismissing the tooltip out
from under the user mid-keystroke.

Keep the scroll-dismissal behavior, but skip it while `document.activeElement`
is inside a tooltip: if the user is typing in it, it should stay up.

Reviewed By: evangrayk

Differential Revision: D116539937

fbshipit-source-id: b702b524ac3973406c90b0016992403db7f52b22

Author: jtbraun

addons/components/Tooltip.tsx

@@ -158,6 +158,9 @@ export function Tooltip({
   }, [visible, onVisible]);
 
   const ref = useRef<HTMLDivElement>(null);
+  // The portaled tooltip content div, so handlers can tell whether events or
+  // focus belong to this tooltip instance rather than any tooltip on the page.
+  const contentRef = useRef<HTMLDivElement | null>(null);
   const getContent = () => {
     if (visible === 'title') {
       return title;
@@ -225,7 +228,11 @@ export function Tooltip({
         } else if (
           e.target !== document &&
           e.target !== document.documentElement &&
-          !eventIsFromInsideTooltip(e as unknown as MouseEvent)
+          !eventIsFromInsideTooltip(e as unknown as MouseEvent) &&
+          // Typing in a tooltip's input can shrink content elsewhere on the page,
+          // firing a scrollTop-clamp scroll event. Don't dismiss out from under
+          // the user while focus is inside this tooltip.
+          !(contentRef.current?.contains(document.activeElement) ?? false)
         ) {
           setVisible(false);
         }
@@ -298,6 +305,7 @@ export function Tooltip({
       {visible && ref.current && (
         <RenderTooltipOnto
           delayMs={realDelayMs}
+          tooltipRef={contentRef}
           element={ref.current}
           placement={placement}
           interactive={interactive}
@@ -334,6 +342,7 @@ function RenderTooltipOnto({
   children,
   delayMs,
   interactive,
+  tooltipRef,
   onTooltipMouseEnter,
   onTooltipMouseLeave,
 }: {
@@ -342,11 +351,11 @@ function RenderTooltipOnto({
   children: ReactNode;
   delayMs?: number;
   interactive?: boolean;
+  tooltipRef: React.MutableRefObject<HTMLDivElement | null>;
   onTooltipMouseEnter?: () => void;
   onTooltipMouseLeave?: () => void;
 }) {
   const sourceBoundingRect = element.getBoundingClientRect();
-  const tooltipRef = useRef<HTMLDivElement | null>(null);
 
   const zoom = getZoomLevel();
   let effectivePlacement = placement;

addons/vscode/CHANGELOG.md

@@ -9,6 +9,7 @@
 - Fix the cwd quick-switch dropdown on Windows and Linux
 - Label Enter and other special keys properly in keyboard shortcut hints
 - Improve performance by skipping re-renders when refetched data is unchanged
+- Don't dismiss tooltips on scroll while focus is inside them
 
 ## 0.1.69