components: useHoverOverlay should compose props

static/app/utils/useHoverOverlay.spec.tsx

@@ -0,0 +1,36 @@
+import {render, screen, userEvent} from 'sentry-test/reactTestingLibrary';
+
+import {useHoverOverlay} from 'sentry/utils/useHoverOverlay';
+
+function Component(props: Partial<React.HTMLAttributes<HTMLInputElement>>) {
+  const {wrapTrigger} = useHoverOverlay('test', {skipWrapper: true});
+
+  return wrapTrigger(<input {...props} />);
+}
+
+describe('useHoverOverlay', () => {
+  it('skipWrapper=true composes handlers', async () => {
+    const componentProps = {
+      onPointerEnter: jest.fn(),
+      onPointerLeave: jest.fn(),
+      onFocus: jest.fn(),
+      onBlur: jest.fn(),
+    };
+
+    render(<Component {...componentProps} />);
+
+    const input = screen.getByRole('textbox');
+
+    await userEvent.hover(input);
+    expect(componentProps.onPointerEnter).toHaveBeenCalled();
+
+    await userEvent.unhover(input);
+    expect(componentProps.onPointerLeave).toHaveBeenCalled();
+
+    await userEvent.click(input);
+    expect(componentProps.onFocus).toHaveBeenCalled();
+
+    await userEvent.tab();
+    expect(componentProps.onBlur).toHaveBeenCalled();
+  });
+});

static/app/utils/useHoverOverlay.tsx

@@ -266,14 +266,35 @@ function useHoverOverlay(
    */
   const wrapTrigger = useCallback(
     (triggerChildren: React.ReactNode) => {
-      const props = {
+      const makeProps = (
+        componentProps: Partial<
+          Pick<
+            React.HTMLAttributes<any>,
+            'onFocus' | 'onBlur' | 'onPointerEnter' | 'onPointerLeave'
+          >
+        >
+      ) => ({
+        // !!These props are always overriden!!
         'aria-describedby': describeById,
         ref: setTriggerElement,
-        onFocus: handleMouseEnter,
-        onBlur: handleMouseLeave,
-        onPointerEnter: handleMouseEnter,
-        onPointerLeave: handleMouseLeave,
-      };
+        // The following props are composed from the componentProps trigger props
+        onFocus: (e: React.FocusEvent<any>) => {
+          handleMouseEnter();
+          componentProps.onFocus?.(e);
+        },
+        onBlur: (e: React.FocusEvent<any>) => {
+          handleMouseLeave();
+          componentProps.onBlur?.(e);
+        },
+        onPointerEnter: (e: React.PointerEvent<any>) => {
+          handleMouseEnter();
+          componentProps.onPointerEnter?.(e);
+        },
+        onPointerLeave: (e: React.PointerEvent<any>) => {
+          handleMouseLeave();
+          componentProps.onPointerLeave?.(e);
+        },
+      });
 
       // Use the `type` property of the react instance to detect whether we have
       // a basic element (type=string) or a class/function component
@@ -291,20 +312,27 @@ function useHoverOverlay(
 
           return cloneElement<any>(
             triggerChildren,
-            Object.assign(props, {style: triggerStyle})
+            Object.assign(makeProps(triggerChildren.props), {style: triggerStyle})
           );
         }
 
         // Basic DOM nodes can be cloned and have more props applied.
         return cloneElement<any>(
           triggerChildren,
-          Object.assign(props, {
+          Object.assign(makeProps(triggerChildren.props), {
             style: triggerChildren.props.style,
           })
         );
       }
 
-      const containerProps = Object.assign(props, {
+      const props =
+        isValidElement(triggerChildren) && 'props' in triggerChildren
+          ? triggerChildren.props
+          : {};
+
+      // @ts-expect-error props is of type unknown at this point,
+      // and we cant infer signature what they could be
+      const containerProps = Object.assign(makeProps(props), {
         style: {
           ...(showUnderline ? theme.tooltipUnderline(underlineColor) : {}),
           ...(containerDisplayMode ? {display: containerDisplayMode} : {}),