[Tooltip][Joy] Fix arrow does not appear (#35473)

mui · Dec 14, 2022 · 362229d · 362229d
1 parent d8078d9
commit 362229d
Show file tree

Hide file tree

Showing 5 changed files with 22 additions and 18 deletions.
diff --git a/docs/data/joy/components/tooltip/ArrowTooltips.js b/docs/data/joy/components/tooltip/ArrowTooltips.js
@@ -1,11 +1,14 @@
 import * as React from 'react';
 import Button from '@mui/joy/Button';
+import Sheet from '@mui/joy/Sheet';
 import Tooltip from '@mui/joy/Tooltip';
 
 export default function ArrowTooltips() {
   return (
-    <Tooltip title="Add" arrow>
-      <Button variant="plain">Arrow</Button>
-    </Tooltip>
+    <Sheet sx={{ pr: 7 }}>
+      <Tooltip title="Add" arrow open placement="right">
+        <Button variant="plain">Arrow</Button>
+      </Tooltip>
+    </Sheet>
   );
 }
diff --git a/docs/data/joy/components/tooltip/ArrowTooltips.tsx b/docs/data/joy/components/tooltip/ArrowTooltips.tsx
@@ -1,11 +1,14 @@
 import * as React from 'react';
 import Button from '@mui/joy/Button';
+import Sheet from '@mui/joy/Sheet';
 import Tooltip from '@mui/joy/Tooltip';
 
 export default function ArrowTooltips() {
   return (
-    <Tooltip title="Add" arrow>
-      <Button variant="plain">Arrow</Button>
-    </Tooltip>
+    <Sheet sx={{ pr: 7 }}>
+      <Tooltip title="Add" arrow open placement="right">
+        <Button variant="plain">Arrow</Button>
+      </Tooltip>
+    </Sheet>
   );
 }
diff --git a/docs/data/joy/components/tooltip/ArrowTooltips.tsx.preview b/docs/data/joy/components/tooltip/ArrowTooltips.tsx.preview
@@ -1,3 +1,5 @@
-<Tooltip title="Add" arrow>
-  <Button variant="plain">Arrow</Button>
-</Tooltip>
+<Sheet sx={{ pr: 7 }}>
+  <Tooltip title="Add" arrow open placement="right">
+    <Button variant="plain">Arrow</Button>
+  </Tooltip>
+</Sheet>
diff --git a/packages/mui-joy/src/Tooltip/Tooltip.tsx b/packages/mui-joy/src/Tooltip/Tooltip.tsx
@@ -588,9 +588,7 @@ const Tooltip = React.forwardRef(function Tooltip(inProps, ref) {
   });
 
   const [SlotArrow, arrowProps] = useSlot('arrow', {
-    additionalProps: {
-      ref: setArrowRef,
-    },
+    ref: setArrowRef,
     className: classes.arrow,
     elementType: TooltipArrow,
     externalForwardedProps: other,

diff --git a/packages/mui-joy/src/utils/useSlot.ts b/packages/mui-joy/src/utils/useSlot.ts
@@ -52,7 +52,9 @@ export default function useSlot<
    * e.g. the `externalForwardedProps` are spread to `root` slot but not other slots.
    */
   name: T,
-  parameters: (T extends 'root' ? { ref: React.ForwardedRef<any> } : {}) & {
+  parameters: (T extends 'root' // root slot must pass a `ref` as a parameter
+    ? { ref: React.ForwardedRef<any> }
+    : { ref?: React.ForwardedRef<any> }) & {
     /**
      * The slot's className
      */
@@ -129,11 +131,7 @@ export default function useSlot<
     externalSlotProps: resolvedComponentsProps,
   });
 
-  const ref = useForkRef(
-    internalRef,
-    // @ts-ignore `ref` is required for the 'root' slot
-    useForkRef(resolvedComponentsProps?.ref, name === 'root' ? parameters.ref : undefined),
-  ) as ((instance: any | null) => void) | null;
+  const ref = useForkRef(internalRef, resolvedComponentsProps?.ref, parameters.ref);
 
   const finalOwnerState = getSlotOwnerState
     ? { ...ownerState, ...getSlotOwnerState(mergedProps as any) }