17450 popover with auto align is breaking (#17455)

* fix: popover with autoalign is breaking * fix: removed commented code * fix: using the ref in toggleTipContent * fix: added display name for toggletipComponent * fix: removed commnets --------- Co-authored-by: Guilherme Datilio Ribeiro <[email protected]>
carbon-design-system · Sep 30, 2024 · 75001eb · 75001eb
1 parent 00fe911
commit 75001eb
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 8 deletions.
diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -9455,6 +9455,7 @@ Map {
     "render": [Function],
   },
   "ToggletipContent" => Object {
+    "$$typeof": Symbol(react.forward_ref),
     "propTypes": Object {
       "children": Object {
         "type": "node",
@@ -9463,6 +9464,7 @@ Map {
         "type": "string",
       },
     },
+    "render": [Function],
   },
   "ToggletipLabel" => Object {
     "propTypes": Object {

diff --git a/packages/react/src/components/Popover/index.tsx b/packages/react/src/components/Popover/index.tsx
@@ -370,7 +370,6 @@ export const Popover: PopoverComponent = React.forwardRef(
         autoAlign && displayName && ['ToggletipButton'].includes(displayName);
       const isAllowedTriggerComponent =
         autoAlign &&
-        displayName &&
         !['ToggletipContent', 'PopoverContent'].includes(displayName);
 
       if (

diff --git a/packages/react/src/components/Toggletip/index.tsx b/packages/react/src/components/Toggletip/index.tsx
@@ -331,19 +331,21 @@ interface ToggletipContentProps {
  * `children` passed in as a prop inside of `PopoverContent` so that they will
  * be rendered inside of the popover for this component.
  */
-export function ToggletipContent({
-  children,
-  className: customClassName,
-}: ToggletipContentProps) {
+const ToggletipContent = React.forwardRef<
+  HTMLDivElement,
+  ToggletipContentProps
+>(function ToggletipContent({ children, className: customClassName }, ref) {
   const toggletip = useToggletip();
   const prefix = usePrefix();
   return (
-    <PopoverContent className={customClassName} {...toggletip?.contentProps}>
+    <PopoverContent
+      className={customClassName}
+      {...toggletip?.contentProps}
+      ref={ref}>
       <div className={`${prefix}--toggletip-content`}>{children}</div>
     </PopoverContent>
   );
-}
-
+});
 ToggletipContent.propTypes = {
   /**
    * Custom children to be rendered as the content of the label
@@ -357,6 +359,10 @@ ToggletipContent.propTypes = {
   className: PropTypes.string,
 };
 
+ToggletipContent.displayName = 'ToggletipContent';
+
+export { ToggletipContent };
+
 interface ToggleTipActionsProps {
   children?: ReactNode;
   className?: string | undefined;