useTooltipTrigger and useButton

[Agile-fox]

I'm trying to make a tooltip component which can take anything as a trigger. It works like intended with everything except the button component with useButton hook implemented. You can focus it with tab but hover interaction don't work and when pressing it throws a warning in console about onClick being deprecated even when onPress it not being used.

One of the way to fix it was to make a prop in Button which takes {triggerProps} from trigger and spread them inside the Button component. with mergeProps after that works wonderful :) But it requires button to have a new prop and I would love to avoid that.

Spreading just ...props instead was almost working, it was generating propagation error for some reason when clicking with space bar on it. I also tried to spread just DOMProps but it didn't give any results.

Second way to fix that was with wrapping Button with FocusableProvider rom react-aria/focus which takes triggerRef and triggerProps but then all of other components stops working :(

So my question is:
Is there any way to make trigger element work with any html tag or the Button component with useButton hook implemented?

You can take a look here, this version is spreading ...DOMprops in the button component. In render you have html button tag which works fine and the Button component which dont.
https://codesandbox.io/s/trusting-jang-tp8zox?file=/src/App.tsx

[snowystinger]

Your example has spread the tooltip trigger props and the same ref onto two different components. This will cause issues. For instance, the ref will be overwritten to be whichever component mounted last, in this case, the HTML button instead of the Button component. Start by making the two different and see if that resolves your issues.

you should have something more like this, where 1 and 2 are the results of two different hook calls

let triggerRef1 = useRef();
let triggerRef2 = useRef();
  let { triggerProps1, tooltipProps1 } = useTooltipTrigger(
    props,
    state,
    triggerRef1
  );
// ... etc
      <Button ref={triggerRef1} {...triggerProps1} style={{ fontSize: 18 }}>
        Button component {props.children}
      </Button>
      <button ref={triggerRef2} {...triggerProps2} style={{ fontSize: 18 }}>
        html button
      </button>
// ... etc 2 tooltips here too for each tooltipProps

As for "take anything as a trigger", be a little careful here, make sure that it can only be focusable elements.