Merge pull request #14 from thompsongl/contextMenuM

Prevents passing undefined size through to menu items
andreadelrio · Jan 14, 2021 · d73573a · d73573a
2 parents e2e59ea + c076074
commit d73573a
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 18 deletions.
diff --git a/src/components/context_menu/__snapshots__/context_menu_panel.test.tsx.snap b/src/components/context_menu/__snapshots__/context_menu_panel.test.tsx.snap
@@ -564,7 +564,7 @@ exports[`EuiContextMenuPanel updating items and content updates to items should
     <div>
       <EuiResizeObserver onResize={[Function: onResize]}>
         <div>
-          <EuiContextMenuItem data-counter={0} buttonRef={[Function: bound ]} size={[undefined]}>
+          <EuiContextMenuItem data-counter={0} buttonRef={[Function: buttonRef]}>
             <button disabled={false} className=\\"euiContextMenuItem\\" type=\\"button\\" data-counter={0}>
               <span className=\\"euiContextMenu__itemLayout\\">
                 <span className=\\"euiContextMenuItem__text\\">
@@ -573,7 +573,7 @@ exports[`EuiContextMenuPanel updating items and content updates to items should
               </span>
             </button>
           </EuiContextMenuItem>
-          <EuiContextMenuItem data-counter={1} buttonRef={[Function: bound ]} size={[undefined]}>
+          <EuiContextMenuItem data-counter={1} buttonRef={[Function: buttonRef]}>
             <button disabled={false} className=\\"euiContextMenuItem\\" type=\\"button\\" data-counter={1}>
               <span className=\\"euiContextMenu__itemLayout\\">
                 <span className=\\"euiContextMenuItem__text\\">
@@ -595,7 +595,7 @@ exports[`EuiContextMenuPanel updating items and content updates to items should
     <div>
       <EuiResizeObserver onResize={[Function: onResize]}>
         <div>
-          <EuiContextMenuItem data-counter={0} buttonRef={[Function: bound ]} size={[undefined]}>
+          <EuiContextMenuItem data-counter={0} buttonRef={[Function: buttonRef]}>
             <button disabled={false} className=\\"euiContextMenuItem\\" type=\\"button\\" data-counter={0}>
               <span className=\\"euiContextMenu__itemLayout\\">
                 <span className=\\"euiContextMenuItem__text\\">
@@ -604,7 +604,7 @@ exports[`EuiContextMenuPanel updating items and content updates to items should
               </span>
             </button>
           </EuiContextMenuItem>
-          <EuiContextMenuItem data-counter={1} buttonRef={[Function: bound ]} size={[undefined]}>
+          <EuiContextMenuItem data-counter={1} buttonRef={[Function: buttonRef]}>
             <button disabled={false} className=\\"euiContextMenuItem\\" type=\\"button\\" data-counter={1}>
               <span className=\\"euiContextMenu__itemLayout\\">
                 <span className=\\"euiContextMenuItem__text\\">
@@ -654,7 +654,7 @@ exports[`EuiContextMenuPanel updating items and content updates to items should
     <div>
       <EuiResizeObserver onResize={[Function: onResize]}>
         <div>
-          <EuiContextMenuItem data-counter={0} buttonRef={[Function: bound ]} size={[undefined]}>
+          <EuiContextMenuItem data-counter={0} buttonRef={[Function: buttonRef]}>
             <button disabled={false} className=\\"euiContextMenuItem\\" type=\\"button\\" data-counter={0}>
               <span className=\\"euiContextMenu__itemLayout\\">
                 <span className=\\"euiContextMenuItem__text\\">
@@ -663,7 +663,7 @@ exports[`EuiContextMenuPanel updating items and content updates to items should
               </span>
             </button>
           </EuiContextMenuItem>
-          <EuiContextMenuItem data-counter={1} buttonRef={[Function: bound ]} size={[undefined]}>
+          <EuiContextMenuItem data-counter={1} buttonRef={[Function: buttonRef]}>
             <button disabled={false} className=\\"euiContextMenuItem\\" type=\\"button\\" data-counter={1}>
               <span className=\\"euiContextMenu__itemLayout\\">
                 <span className=\\"euiContextMenuItem__text\\">
@@ -685,7 +685,7 @@ exports[`EuiContextMenuPanel updating items and content updates to items should
     <div>
       <EuiResizeObserver onResize={[Function: onResize]}>
         <div>
-          <EuiContextMenuItem data-counter={2} buttonRef={[Function: bound ]} size={[undefined]}>
+          <EuiContextMenuItem data-counter={2} buttonRef={[Function: buttonRef]}>
             <button disabled={false} className=\\"euiContextMenuItem\\" type=\\"button\\" data-counter={2}>
               <span className=\\"euiContextMenu__itemLayout\\">
                 <span className=\\"euiContextMenuItem__text\\">
@@ -694,7 +694,7 @@ exports[`EuiContextMenuPanel updating items and content updates to items should
               </span>
             </button>
           </EuiContextMenuItem>
-          <EuiContextMenuItem data-counter={3} buttonRef={[Function: bound ]} size={[undefined]}>
+          <EuiContextMenuItem data-counter={3} buttonRef={[Function: buttonRef]}>
             <button disabled={false} className=\\"euiContextMenuItem\\" type=\\"button\\" data-counter={3}>
               <span className=\\"euiContextMenu__itemLayout\\">
                 <span className=\\"euiContextMenuItem__text\\">

diff --git a/src/components/context_menu/context_menu_panel.tsx b/src/components/context_menu/context_menu_panel.tsx
@@ -31,7 +31,10 @@ import { CommonProps, NoArgCallback, keysOf } from '../common';
 import { EuiIcon } from '../icon';
 import { EuiResizeObserver } from '../observer/resize_observer';
 import { cascadingMenuKeys } from '../../services';
-import { EuiContextMenuItem } from './context_menu_item';
+import {
+  EuiContextMenuItem,
+  EuiContextMenuItemProps,
+} from './context_menu_item';
 
 export type EuiContextMenuPanelHeightChangeHandler = (height: number) => void;
 export type EuiContextMenuPanelTransitionType = 'in' | 'out';
@@ -404,7 +407,7 @@ export class EuiContextMenuPanel extends Component<Props, State> {
     this.updateFocus();
   }
 
-  menuItemRef = (index: number, node: HTMLElement) => {
+  menuItemRef = (index: number, node: HTMLElement | null) => {
     // There's a weird bug where if you navigate to a panel without items, then this callback
     // is still invoked, so we have to do a truthiness check.
     if (node) {
@@ -495,14 +498,17 @@ export class EuiContextMenuPanel extends Component<Props, State> {
 
     const content =
       items && items.length
-        ? items.map((MenuItem, index) =>
-            MenuItem.type === EuiContextMenuItem
-              ? cloneElement(MenuItem, {
-                  buttonRef: this.menuItemRef.bind(this, index),
-                  size,
-                })
-              : MenuItem
-          )
+        ? items.map((MenuItem, index) => {
+            const cloneProps: Partial<EuiContextMenuItemProps> = {
+              buttonRef: (node) => this.menuItemRef(index, node),
+            };
+            if (size) {
+              cloneProps.size = size;
+            }
+            return MenuItem.type === EuiContextMenuItem
+              ? cloneElement(MenuItem, cloneProps)
+              : MenuItem;
+          })
         : children;
 
     return (