From e68cbe8ecd97e077dc3101472afa151fbeabed51 Mon Sep 17 00:00:00 2001
From: Chaiwat Ekkaewnumchai <cekkaewnumchai@fb.com>
Date: Fri, 3 Apr 2020 03:01:25 -0700
Subject: [PATCH] Add forwardRef to ContextMenu

Summary:
There was a problem for the next diff because ContextMenu doesn't forward reference to child elements which causes no component attached to ref.

This diff forward ref of ContextMenu to its child. Also, there is casting because of genetic functional component used by NotificationHub

Reviewed By: mweststrate

Differential Revision: D20817968

fbshipit-source-id: d0a19a447decca73db53f02ea029f56fc7127e94
---
 desktop/app/src/ui/components/ContextMenu.tsx | 23 +++++++++++--------
 1 file changed, 14 insertions(+), 9 deletions(-)

diff --git a/desktop/app/src/ui/components/ContextMenu.tsx b/desktop/app/src/ui/components/ContextMenu.tsx
index 0e9d3f555..4c047f5b2 100644
--- a/desktop/app/src/ui/components/ContextMenu.tsx
+++ b/desktop/app/src/ui/components/ContextMenu.tsx
@@ -7,7 +7,14 @@
  * @format
  */
 
-import {createElement, useContext, useCallback} from 'react';
+import {
+  createElement,
+  useContext,
+  useCallback,
+  forwardRef,
+  Ref,
+  ReactElement,
+} from 'react';
 import {ContextMenuContext} from './ContextMenuProvider';
 import FlexColumn from './FlexColumn';
 import {MenuItemConstructorOptions} from 'electron';
@@ -33,13 +40,10 @@ type Props<C> = {
  *
  * Separators can be added by `{type: 'separator'}`
  */
-export default function ContextMenu<C>({
-  items,
-  buildItems,
-  component,
-  children,
-  ...otherProps
-}: Props<C>) {
+export default forwardRef(function ContextMenu<C>(
+  {items, buildItems, component, children, ...otherProps}: Props<C>,
+  ref: Ref<any> | null,
+) {
   const contextMenuManager = useContext(ContextMenuContext);
   const onContextMenu = useCallback(() => {
     if (items != null) {
@@ -51,9 +55,10 @@ export default function ContextMenu<C>({
   return createElement(
     component || FlexColumn,
     {
+      ref,
       onContextMenu,
       ...otherProps,
     },
     children,
   );
-}
+}) as <T>(p: Props<T> & {ref?: Ref<any>}) => ReactElement;