Change Popover component to use forwardRef

Author: kosuke-k

src/scripts/Popover.tsx

@@ -2,8 +2,8 @@ import React, {
   HTMLAttributes,
   CSSProperties,
   FC,
-  useRef,
   ReactNode,
+  forwardRef,
 } from 'react';
 import classnames from 'classnames';
 import {
@@ -60,9 +60,10 @@ export type PopoverProps = {
 /**
  *
  */
-export const PopoverInner: FC<PopoverProps & AutoAlignInjectedProps> = (
-  props
-) => {
+export const PopoverInner = forwardRef<
+  HTMLDivElement,
+  PopoverProps & AutoAlignInjectedProps
+>((props, ref) => {
   const {
     children,
     alignment,
@@ -73,7 +74,6 @@ export const PopoverInner: FC<PopoverProps & AutoAlignInjectedProps> = (
     bodyStyle,
     ...rprops
   } = props;
-  const elRef = useRef<HTMLDivElement | null>(null);
   const nubbinPosition = alignment.join('-');
   const [firstAlign, secondAlign] = alignment;
   const popoverClassNames = classnames(
@@ -103,7 +103,7 @@ export const PopoverInner: FC<PopoverProps & AutoAlignInjectedProps> = (
   };
   return (
     <div
-      ref={elRef}
+      ref={ref}
       className={popoverClassNames}
       role={tooltip ? 'tooltip' : 'dialog'}
       style={rootStyle}
@@ -112,22 +112,26 @@ export const PopoverInner: FC<PopoverProps & AutoAlignInjectedProps> = (
       <PopoverBody style={bodyStyle}>{children}</PopoverBody>
     </div>
   );
-};
+});
 
 /**
  *
  */
-export const Popover: FC<PopoverProps> = ({ position, ...props }) => {
-  const alignment: RectangleAlignment | undefined = position?.split('-') as
-    | RectangleAlignment
-    | undefined;
-  return (
-    <AutoAlign
-      triggerSelector='.slds-dropdown-trigger'
-      alignmentStyle='popover'
-      alignment={alignment}
-    >
-      {(injectedProps) => <PopoverInner {...props} {...injectedProps} />}
-    </AutoAlign>
-  );
-};
+export const Popover = forwardRef<HTMLDivElement, PopoverProps>(
+  ({ position, ...props }, ref) => {
+    const alignment: RectangleAlignment | undefined = position?.split('-') as
+      | RectangleAlignment
+      | undefined;
+    return (
+      <AutoAlign
+        triggerSelector='.slds-dropdown-trigger'
+        alignmentStyle='popover'
+        alignment={alignment}
+      >
+        {(injectedProps) => (
+          <PopoverInner {...props} {...injectedProps} ref={ref} />
+        )}
+      </AutoAlign>
+    );
+  }
+);

stories/Tabs.stories.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useState } from 'react';
+import React, { FocusEvent, useCallback, useRef, useState } from 'react';
 import {
   Tabs,
   Tab,
@@ -55,13 +55,34 @@ function CustomTabItemContent(props: TabItemRendererProps & { icon: string }) {
 function TooltipContent(props: { text: string }) {
   const { text } = props;
   const [isHideTooltip, setIsHideTooltip] = useState(true);
+  const popoverRef = useRef<HTMLDivElement>(null);
   const tooltipToggle = useCallback(() => {
     setIsHideTooltip((hidden) => !hidden);
   }, []);
+  const onIconBlur = useCallback((e: FocusEvent<HTMLElement>) => {
+    if (popoverRef.current !== e.relatedTarget) {
+      setIsHideTooltip(true);
+    }
+  }, []);
+  const onPopoverBlur = useCallback(() => {
+    setIsHideTooltip(true);
+  }, []);
   return (
     <>
-      <Button type='icon' icon='info' onClick={tooltipToggle} title={text} />
-      <Popover hidden={isHideTooltip} tooltip>
+      <Button
+        type='icon'
+        icon='info'
+        onClick={tooltipToggle}
+        onBlur={onIconBlur}
+        title={text}
+      />
+      <Popover
+        ref={popoverRef}
+        hidden={isHideTooltip}
+        tabIndex={-1}
+        onBlur={onPopoverBlur}
+        tooltip
+      >
         {text}
       </Popover>
     </>