From 23e92b091a68e30f4e476b435f786aae3e5f3ee1 Mon Sep 17 00:00:00 2001
From: Oleksandr Fediashov <olfedias@microsoft.com>
Date: Wed, 29 Oct 2025 17:28:33 +0100
Subject: [PATCH] chore(v0): cleanup Refs

---
 .../ComponentControls/ComponentControls.tsx   | 215 +++++++-----------
 .../Portal/Types/PortalExample.shorthand.tsx  |  62 -----
 .../PortalExampleFocusTrapped.shorthand.tsx   |  75 ------
 .../fluentui/react-component-ref/src/Ref.tsx  |   2 +-
 .../react-component-ref/test/Ref-test.tsx     |  14 +-
 .../react-component-ref/test/fixtures.tsx     |   6 +-
 .../src/components/Portal/Portal.tsx          |  22 +-
 .../src/components/Portal/PortalInner.tsx     |  11 +-
 .../src/utils/positioner/Popper.tsx           |   9 +-
 9 files changed, 125 insertions(+), 291 deletions(-)
 delete mode 100644 packages/fluentui/docs/src/examples/components/Portal/Types/PortalExample.shorthand.tsx
 delete mode 100644 packages/fluentui/docs/src/examples/components/Portal/Types/PortalExampleFocusTrapped.shorthand.tsx

diff --git a/packages/fluentui/docs/src/components/ComponentDoc/ComponentControls/ComponentControls.tsx b/packages/fluentui/docs/src/components/ComponentDoc/ComponentControls/ComponentControls.tsx
index 28bcc697c2a798..fff46455c9d4ac 100644
--- a/packages/fluentui/docs/src/components/ComponentDoc/ComponentControls/ComponentControls.tsx
+++ b/packages/fluentui/docs/src/components/ComponentDoc/ComponentControls/ComponentControls.tsx
@@ -2,19 +2,10 @@ import * as _ from 'lodash';
 import * as React from 'react';
 import { NavLink } from 'react-router-dom';
 
-import { CodeSandboxExporter, CodeSandboxState, CopyToClipboard } from '@fluentui/docs-components';
-import {
-  AcceptIcon,
-  CircleIcon,
-  EditIcon,
-  IndentIcon,
-  LinkIcon,
-  OpenOutsideIcon,
-} from '@fluentui/react-icons-northstar';
-import { Loader, Menu, menuAsToolbarBehavior, MenuItem, MenuProps, Tooltip } from '@fluentui/react-northstar';
+import { CopyToClipboard } from '@fluentui/docs-components';
+import { CircleIcon, EditIcon, IndentIcon, LinkIcon, OpenOutsideIcon } from '@fluentui/react-icons-northstar';
+import { Menu, menuAsToolbarBehavior, MenuItem, MenuProps, Tooltip } from '@fluentui/react-northstar';
 
-import { CodeSandboxIcon } from '../../Icons/CodeSandboxIcon';
-import { imports } from '../../Playground/renderConfig';
 import { ComponentSourceManagerLanguage } from '../ComponentSourceManager';
 import CodeSnippetIcon from './CodeSnippetIcon';
 
@@ -54,126 +45,92 @@ const ComponentControls: React.FC<ComponentControlsProps> = props => {
     ...rest
   } = props;
 
-  return (
-    <CodeSandboxExporter
-      exampleCode={exampleCode}
-      exampleLanguage={exampleLanguage}
-      exampleName={examplePath}
-      imports={imports}
-    >
-      {(state, onCodeSandboxClick) => {
-        const codeSandboxTooltip =
-          state === CodeSandboxState.Default
-            ? 'CodeSandbox'
-            : state === CodeSandboxState.Loading
-            ? 'Exporting...'
-            : 'Click to open';
-
-        const codeSandboxIcon =
-          state === CodeSandboxState.Default ? (
-            <CodeSandboxIcon />
-          ) : state === CodeSandboxState.Loading ? (
-            <Loader size="small" />
-          ) : (
-            <AcceptIcon />
-          );
+  const items: MenuProps['items'] = [
+    {
+      icon: <CodeSnippetIcon />,
+      onClick: onShowCode,
+      active: showCode,
+      children: (Component: typeof MenuItem, props) => (
+        <Tooltip content="Try it" key="show-code" trigger={<Component {...props} />} />
+      ),
+    },
 
-        const items: MenuProps['items'] = [
-          {
-            icon: <CodeSnippetIcon />,
-            onClick: onShowCode,
-            active: showCode,
-            children: (Component: typeof MenuItem, props) => (
-              <Tooltip content="Try it" key="show-code" trigger={<Component {...props} />} />
-            ),
-          },
+    {
+      icon: <EditIcon />,
+      onClick: onShowVariables,
+      active: showVariables,
+      children: (Component: typeof MenuItem, props) => (
+        <Tooltip content="Theme it" key="show-variables" trigger={<Component {...props} />} />
+      ),
+    },
+    {
+      key: 'divider-1',
+      style: { margin: '0 5px' },
+      kind: 'divider',
+    },
+    {
+      icon: <CircleIcon outline />,
+      onClick: onShowTransparent,
+      active: showTransparent,
+      children: (Component: typeof MenuItem, props) => (
+        <Tooltip content="Transparent" key="show-transparent" trigger={<Component {...props} />} />
+      ),
+    },
+    {
+      icon: <IndentIcon rotate={180} />,
+      onClick: onShowRtl,
+      active: showRtl,
+      children: (Component: typeof MenuItem, props) => (
+        <Tooltip content="RTL" key="show-rtl" trigger={<Component {...props} />} />
+      ),
+    },
 
-          {
-            icon: <EditIcon />,
-            onClick: onShowVariables,
-            active: showVariables,
-            children: (Component: typeof MenuItem, props) => (
-              <Tooltip content="Theme it" key="show-variables" trigger={<Component {...props} />} />
-            ),
-          },
-          {
-            key: 'divider-1',
-            style: { margin: '0 5px' },
-            kind: 'divider',
-          },
-          {
-            icon: <CircleIcon outline />,
-            onClick: onShowTransparent,
-            active: showTransparent,
-            children: (Component: typeof MenuItem, props) => (
-              <Tooltip content="Transparent" key="show-transparent" trigger={<Component {...props} />} />
-            ),
-          },
-          {
-            icon: <IndentIcon rotate={180} />,
-            onClick: onShowRtl,
-            active: showRtl,
-            children: (Component: typeof MenuItem, props) => (
-              <Tooltip content="RTL" key="show-rtl" trigger={<Component {...props} />} />
-            ),
-          },
+    {
+      icon: <OpenOutsideIcon />,
+      children: (Component: typeof MenuItem, props) => (
+        <Tooltip content="Popout" key="maximize" trigger={<Component {...props} />} />
+      ),
+      as: NavLink,
+      to: `/maximize/${_.kebabCase(examplePath.split('/').slice(-1).pop())}/${showRtl}`,
+      target: '_blank',
+      rel: 'noopener noreferrer',
+    },
+    {
+      key: 'divider-2',
+      style: { margin: '0 5px' },
+      kind: 'divider',
+    },
+    {
+      icon: <LinkIcon />,
+      children: (Component: typeof MenuItem, props) => (
+        <CopyToClipboard key="copy-link" value={anchorName}>
+          {(active, onClick) => (
+            <Tooltip
+              content={active ? 'Copied!' : 'Permalink'}
+              trigger={
+                <Component
+                  {...props}
+                  onClick={(e: React.SyntheticEvent) => {
+                    onClick();
+                    onCopyLink(e);
+                  }}
+                />
+              }
+            />
+          )}
+        </CopyToClipboard>
+      ),
+    },
+  ];
 
-          {
-            icon: <OpenOutsideIcon />,
-            children: (Component: typeof MenuItem, props) => (
-              <Tooltip content="Popout" key="maximize" trigger={<Component {...props} />} />
-            ),
-            as: NavLink,
-            to: `/maximize/${_.kebabCase(examplePath.split('/').slice(-1).pop())}/${showRtl}`,
-            target: '_blank',
-            rel: 'noopener noreferrer',
-          },
-          {
-            key: 'divider-2',
-            style: { margin: '0 5px' },
-            kind: 'divider',
-          },
-          {
-            onClick: onCodeSandboxClick,
-            icon: codeSandboxIcon,
-            children: (Component: typeof MenuItem, props) => (
-              <Tooltip content={codeSandboxTooltip} key="show-codesandbox" trigger={<Component {...props} />} />
-            ),
-          },
-          {
-            icon: <LinkIcon />,
-            children: (Component: typeof MenuItem, props) => (
-              <CopyToClipboard key="copy-link" value={anchorName}>
-                {(active, onClick) => (
-                  <Tooltip
-                    content={active ? 'Copied!' : 'Permalink'}
-                    trigger={
-                      <Component
-                        {...props}
-                        onClick={(e: React.SyntheticEvent) => {
-                          onClick();
-                          onCopyLink(e);
-                        }}
-                      />
-                    }
-                  />
-                )}
-              </CopyToClipboard>
-            ),
-          },
-        ];
-
-        return (
-          <Menu
-            {...rest}
-            iconOnly
-            accessibility={menuAsToolbarBehavior}
-            aria-label={`Actions for ${titleForAriaLabel || 'untitled'} example`}
-            items={items}
-          />
-        );
-      }}
-    </CodeSandboxExporter>
+  return (
+    <Menu
+      {...rest}
+      iconOnly
+      accessibility={menuAsToolbarBehavior}
+      aria-label={`Actions for ${titleForAriaLabel || 'untitled'} example`}
+      items={items}
+    />
   );
 };
 
diff --git a/packages/fluentui/docs/src/examples/components/Portal/Types/PortalExample.shorthand.tsx b/packages/fluentui/docs/src/examples/components/Portal/Types/PortalExample.shorthand.tsx
deleted file mode 100644
index 45f2bc4a987cc9..00000000000000
--- a/packages/fluentui/docs/src/examples/components/Portal/Types/PortalExample.shorthand.tsx
+++ /dev/null
@@ -1,62 +0,0 @@
-import * as React from 'react';
-import { Button, Divider, Flex, Header, Label, Portal } from '@fluentui/react-northstar';
-
-class PortalExamplePortal extends React.Component {
-  state = { log: [], logCount: 0 };
-
-  handleClick = () =>
-    this.setState({
-      log: [`${new Date().toLocaleTimeString()}: handleClick`, ...this.state.log].slice(0, 20),
-      logCount: this.state.logCount + 1,
-    });
-
-  clearLog = () => this.setState({ log: [], logCount: 0 });
-
-  render() {
-    const { log, logCount } = this.state;
-
-    return (
-      <div>
-        <Portal
-          content={
-            <div
-              style={{
-                position: 'fixed',
-                left: '40%',
-                top: '45%',
-                zIndex: 1000,
-                backgroundColor: '#fff',
-                padding: '15px',
-                boxShadow: 'rgb(187, 187, 187) 0px 2px 8px',
-                border: '1px solid rgba(34,36,38,.15)',
-                borderRadius: '5px',
-              }}
-            >
-              <Header>This is a basic portal</Header>
-              <p>Portals have tons of great callback functions to hook into.</p>
-              <p>To close, simply click the close button or click away</p>
-            </div>
-          }
-          trigger={<Button content={'Toggle portal'} onClick={this.handleClick} />}
-        />
-        <Divider />
-        <div>
-          <Flex gap="gap.small" vAlign="center">
-            <Button onClick={this.clearLog} content="Clear" />
-            <span>
-              Event Log <Label circular>{logCount}</Label>
-            </span>
-          </Flex>
-
-          <pre>
-            {log.map((e, i) => (
-              <div key={i}>{e}</div>
-            ))}
-          </pre>
-        </div>
-      </div>
-    );
-  }
-}
-
-export default PortalExamplePortal;
diff --git a/packages/fluentui/docs/src/examples/components/Portal/Types/PortalExampleFocusTrapped.shorthand.tsx b/packages/fluentui/docs/src/examples/components/Portal/Types/PortalExampleFocusTrapped.shorthand.tsx
deleted file mode 100644
index 8e6553208378a1..00000000000000
--- a/packages/fluentui/docs/src/examples/components/Portal/Types/PortalExampleFocusTrapped.shorthand.tsx
+++ /dev/null
@@ -1,75 +0,0 @@
-import * as React from 'react';
-import { Button, Header, Portal } from '@fluentui/react-northstar';
-
-class PortalExampleFocusTrapped extends React.Component {
-  state = { open: false };
-
-  openPortal = () => {
-    this.setState({ open: true });
-  };
-
-  closePortal = () => {
-    this.setState({ open: false });
-  };
-
-  render() {
-    const { open } = this.state;
-    const btnContent = open ? 'Close Portal' : 'Open Portal';
-
-    return (
-      <div>
-        <Button content={btnContent} onClick={this.openPortal} />
-        <Portal
-          trapFocus={{
-            // When 'false', all clicks outside the Portal will be caught and not handled.
-            // 'true' by default.
-            isClickableOutsideFocusTrap: false,
-            // Indicates whether to focus element which triggered FTZ on outside click
-            // 'false' by default
-            // note: if isClickableOutsideFocusTrap === 'false', focusTriggerOnOutsideClick will not be taken into account.
-            focusTriggerOnOutsideClick: false,
-            // Allows to pass element which you want to be focused after Portal is closed.
-            // 'null' by default, so the trigger element would be focused on close.
-            elementToFocusOnDismiss: null,
-            // Indicates whether to force focus inside a Portal, if the 'focus' event was invoked at any place.
-            // 'false' by default.
-            forceFocusInsideTrapOnOutsideFocus: false,
-            // Ignore focusing element which activated Portal after it was closed.
-            // 'false' by default.
-            ignoreExternalFocusing: false,
-            // Do not focus first focusable element of Portal when opened.
-            // 'false' by default.
-            disableFirstFocus: false,
-            // Indicates an element to focus after Portal has opened.
-            // 'null' by default. The first focusable element of Portal will be focused.
-            firstFocusableSelector: null,
-          }}
-          open={open}
-          content={
-            <div
-              style={{
-                backgroundColor: '#fff',
-                position: 'fixed',
-                left: '40%',
-                top: '45%',
-                zIndex: 1000,
-                padding: '15px',
-                boxShadow: 'rgb(187, 187, 187) 0px 2px 8px',
-                border: '1px solid rgba(34,36,38,.15)',
-                borderRadius: '5px',
-              }}
-            >
-              <Header>This is a portal with focus trap!</Header>
-              <p tabIndex={0}>Portal doesn't close on outside click. See passed focus trap props.</p>
-              <p tabIndex={0}>To close, simply click the close button</p>
-              <Button content="Do nothing" />
-              <Button content="Close popup" onClick={this.closePortal} />
-            </div>
-          }
-        />
-      </div>
-    );
-  }
-}
-
-export default PortalExampleFocusTrapped;
diff --git a/packages/fluentui/react-component-ref/src/Ref.tsx b/packages/fluentui/react-component-ref/src/Ref.tsx
index 492207e6f05709..1ebaef2326d390 100644
--- a/packages/fluentui/react-component-ref/src/Ref.tsx
+++ b/packages/fluentui/react-component-ref/src/Ref.tsx
@@ -62,7 +62,7 @@ export class Ref extends React.Component<RefProps, RefState> {
       return { kind: 'self' };
     }
 
-    if (ReactIs.isForwardRef(child)) {
+    if (ReactIs.isForwardRef(child) || typeof (child as React.ReactElement).type === 'string') {
       return { kind: 'forward' };
     }
 
diff --git a/packages/fluentui/react-component-ref/test/Ref-test.tsx b/packages/fluentui/react-component-ref/test/Ref-test.tsx
index 61eb3798ea1cf0..fa72cced9d9c87 100644
--- a/packages/fluentui/react-component-ref/test/Ref-test.tsx
+++ b/packages/fluentui/react-component-ref/test/Ref-test.tsx
@@ -64,12 +64,12 @@ describe('Ref', () => {
       const innerRef = jest.fn();
       const wrapper = mount(
         <Ref innerRef={innerRef}>
-          <div />
+          <DOMFunction />
         </Ref>,
       );
 
       expect(innerRef).toHaveBeenCalledWith(expect.objectContaining({ tagName: 'DIV' }));
-      wrapper.setProps({ children: <button /> });
+      wrapper.setProps({ children: <DOMFunction isButton /> });
 
       expect(innerRef).toHaveBeenCalledTimes(2);
       expect(innerRef).toHaveBeenCalledWith(expect.objectContaining({ tagName: 'BUTTON' }));
@@ -95,7 +95,7 @@ describe('Ref', () => {
       const updatedRef = jest.fn();
       const wrapper = mount(
         <Ref innerRef={initialRef}>
-          <div />
+          <DOMFunction />
         </Ref>,
       );
 
@@ -114,7 +114,7 @@ describe('Ref', () => {
       const updatedRef = jest.fn();
       const wrapper = mount(
         <Ref innerRef={initialRef}>
-          <div />
+          <DOMFunction />
         </Ref>,
       );
 
@@ -122,7 +122,7 @@ describe('Ref', () => {
       expect(updatedRef).not.toHaveBeenCalled();
 
       jest.resetAllMocks();
-      wrapper.setProps({ children: <span />, innerRef: updatedRef });
+      wrapper.setProps({ children: <DOMFunction isButton />, innerRef: updatedRef });
 
       expect(initialRef).not.toHaveBeenCalled();
       expect(updatedRef).toHaveBeenCalledTimes(1);
@@ -144,6 +144,10 @@ describe('Ref', () => {
   });
 
   describe('kind="forward"', () => {
+    it('returns node from a primitive element', () => {
+      testInnerRef('div');
+    });
+
     it('works with "forwardRef" API', () => {
       const forwardedRef = React.createRef<HTMLButtonElement>();
       const innerRef = React.createRef<HTMLDivElement>();
diff --git a/packages/fluentui/react-component-ref/test/fixtures.tsx b/packages/fluentui/react-component-ref/test/fixtures.tsx
index f049f1600dbfb9..b6625da4f605c6 100644
--- a/packages/fluentui/react-component-ref/test/fixtures.tsx
+++ b/packages/fluentui/react-component-ref/test/fixtures.tsx
@@ -1,6 +1,10 @@
 import * as React from 'react';
 
-export const DOMFunction: React.FunctionComponent = props => <div {...props} id="node" />;
+export const DOMFunction: React.FunctionComponent<{ isButton?: boolean; id?: string }> = props => {
+  const { id = 'node', isButton, ...rest } = props;
+
+  return isButton ? <button {...rest} id={id} /> : <div {...rest} id={id} />;
+};
 
 export const CompositeFunction: React.FunctionComponent = props => <DOMFunction {...props} />;
 
diff --git a/packages/fluentui/react-northstar/src/components/Portal/Portal.tsx b/packages/fluentui/react-northstar/src/components/Portal/Portal.tsx
index ce9364f7d225d1..61eb7100029131 100644
--- a/packages/fluentui/react-northstar/src/components/Portal/Portal.tsx
+++ b/packages/fluentui/react-northstar/src/components/Portal/Portal.tsx
@@ -14,11 +14,9 @@ import * as React from 'react';
 import * as _ from 'lodash';
 import { FluentComponentStaticProps } from '../../types';
 import {
-  childrenExist,
   doesNodeContainClick,
   ChildrenComponentProps,
   commonPropTypes,
-  ContentComponentProps,
   rtlTextContainer,
   createShorthandFactory,
 } from '../../utils';
@@ -29,7 +27,7 @@ export type TriggerAccessibility = {
   keyHandlers?: AccessibilityHandlerProps;
 };
 
-export interface PortalProps extends ChildrenComponentProps, ContentComponentProps {
+export interface PortalProps extends ChildrenComponentProps<React.ReactElement> {
   /** Initial value of open. */
   defaultOpen?: boolean;
 
@@ -85,7 +83,7 @@ export interface PortalProps extends ChildrenComponentProps, ContentComponentPro
 export const Portal: React.FC<PortalProps> & FluentComponentStaticProps<PortalProps> = props => {
   const context = useFluentContext();
 
-  const { children, content, trapFocus, trigger, triggerAccessibility = {} } = props;
+  const { children, trapFocus, trigger, triggerAccessibility = {} } = props;
   const portalRef = React.useRef<HTMLElement>();
   const triggerRef = React.useRef<HTMLElement>();
 
@@ -96,20 +94,21 @@ export const Portal: React.FC<PortalProps> & FluentComponentStaticProps<PortalPr
   });
 
   const renderPortal = (): JSX.Element | undefined => {
-    const contentToRender = childrenExist(children) ? children : content;
     const focusTrapZoneProps = typeof trapFocus === 'boolean' ? {} : trapFocus;
+
     return (
       open && (
-        <Ref innerRef={portalRef}>
+        <>
           <PortalInner
             onMount={handleMount}
             onUnmount={handleUnmount}
-            {...rtlTextContainer.getAttributes({ forElements: [contentToRender] })}
+            ref={portalRef}
+            {...rtlTextContainer.getAttributes({ forElements: [children] })}
           >
-            {trapFocus ? <FocusTrapZone {...focusTrapZoneProps}>{contentToRender}</FocusTrapZone> : contentToRender}
-            <EventListener listener={handleDocumentClick} target={context.target} type="click" />
+            {trapFocus ? <FocusTrapZone {...focusTrapZoneProps}>{children}</FocusTrapZone> : children}
           </PortalInner>
-        </Ref>
+          <EventListener listener={handleDocumentClick} target={context.target} type="click" />
+        </>
       )
     );
   };
@@ -174,8 +173,11 @@ Portal.propTypes = {
     accessibility: false,
     as: false,
     className: false,
+    content: false,
+    children: false,
     styled: false,
   }),
+  children: PropTypes.element,
   defaultOpen: PropTypes.bool,
   onMount: PropTypes.func,
   onUnmount: PropTypes.func,
diff --git a/packages/fluentui/react-northstar/src/components/Portal/PortalInner.tsx b/packages/fluentui/react-northstar/src/components/Portal/PortalInner.tsx
index 115f36637ae771..b16367f6cf552b 100644
--- a/packages/fluentui/react-northstar/src/components/Portal/PortalInner.tsx
+++ b/packages/fluentui/react-northstar/src/components/Portal/PortalInner.tsx
@@ -7,12 +7,13 @@ import * as _ from 'lodash';
 import * as PropTypes from 'prop-types';
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
+import { Ref } from '@fluentui/react-component-ref';
 
 import { isBrowser, ChildrenComponentProps, commonPropTypes } from '../../utils';
 import { PortalContext } from '../Provider/portalContext';
 import { usePortalBox } from './usePortalBox';
 
-export interface PortalInnerProps extends ChildrenComponentProps {
+export interface PortalInnerProps extends ChildrenComponentProps<React.ReactElement> {
   /** Existing element the portal should be bound to. */
   mountNode?: HTMLElement;
 
@@ -34,7 +35,7 @@ export interface PortalInnerProps extends ChildrenComponentProps {
 /**
  * A PortalInner is a container for Portal's content.
  */
-export const PortalInner: React.FC<PortalInnerProps> = props => {
+export const PortalInner = React.forwardRef<HTMLElement, PortalInnerProps>((props, ref) => {
   const { children, mountNode } = props;
 
   const { className } = React.useContext(PortalContext);
@@ -60,7 +61,7 @@ export const PortalInner: React.FC<PortalInnerProps> = props => {
     container &&
     ReactDOM.createPortal(
       <>
-        {children}
+        <Ref innerRef={ref}>{children}</Ref>
         {/* Heads up!
          *  This node exists only to ensure that the portal is not empty as we rely on that in `usePortalBox`
          *  hook for React 18+.
@@ -70,16 +71,18 @@ export const PortalInner: React.FC<PortalInnerProps> = props => {
       container,
     )
   );
-};
+});
 
 PortalInner.propTypes = {
   ...commonPropTypes.createCommon({
     accessibility: false,
     as: false,
     className: false,
+    children: false,
     content: false,
     styled: false,
   }),
+  children: PropTypes.element,
   mountNode: customPropTypes.domNode,
   onMount: PropTypes.func,
   onUnmount: PropTypes.func,
diff --git a/packages/fluentui/react-northstar/src/utils/positioner/Popper.tsx b/packages/fluentui/react-northstar/src/utils/positioner/Popper.tsx
index 79832d97a0b557..8998809ac41c3f 100644
--- a/packages/fluentui/react-northstar/src/utils/positioner/Popper.tsx
+++ b/packages/fluentui/react-northstar/src/utils/positioner/Popper.tsx
@@ -15,7 +15,7 @@ const DEFAULT_POSITIONING_DEPENDENCIES = [];
  *
  * @deprecated Please use "usePopper()" hook instead.
  */
-export const Popper: React.FunctionComponent<PopperProps> = props => {
+export const Popper = React.forwardRef<HTMLDivElement, PopperProps>((props, ref) => {
   const usesRenderProps: boolean = typeof props.children === 'function';
 
   const proposedPlacement = getPlacement(props.align, props.position, props.rtl);
@@ -64,7 +64,8 @@ export const Popper: React.FunctionComponent<PopperProps> = props => {
         placement: computedPlacement,
         scheduleUpdate,
       })
-    : (props.children as React.ReactElement);
+    : (props.children as React.ReactElement | null);
+  const childRef = useMergedRefs(containerRef, ref);
 
-  return child ? <Ref innerRef={containerRef}>{React.Children.only(child)}</Ref> : null;
-};
+  return child ? <Ref innerRef={childRef}>{React.Children.only(child)}</Ref> : null;
+});