From 20dddd793fde3781f6d943ba4ec02737aa51ef32 Mon Sep 17 00:00:00 2001
From: CJ Cenizal <cj@cenizal.com>
Date: Wed, 21 Feb 2018 13:00:45 -0800
Subject: [PATCH] Fix EuiContextMenu bug in which the menu items were
 continuously re-rendered causing their refs to be cleared.

---
 src/components/context_menu/context_menu.js | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/src/components/context_menu/context_menu.js b/src/components/context_menu/context_menu.js
index fcf9ee251da4..a16c5e711a02 100644
--- a/src/components/context_menu/context_menu.js
+++ b/src/components/context_menu/context_menu.js
@@ -69,6 +69,7 @@ export class EuiContextMenu extends Component {
     this.idToPanelMap = {};
     this.idToPreviousPanelIdMap = {};
     this.idAndItemIndexToPanelIdMap = {};
+    this.idToRenderedItemsMap = {};
 
     this.state = {
       height: undefined,
@@ -153,6 +154,7 @@ export class EuiContextMenu extends Component {
     this.idToPanelMap = mapIdsToPanels(panels);
     this.idToPreviousPanelIdMap = mapIdsToPreviousPanels(panels);
     this.idAndItemIndexToPanelIdMap = mapPanelItemsToPanels(panels);
+    this.mapIdsToRenderedItems(panels);
   }
 
   componentWillMount() {
@@ -165,6 +167,15 @@ export class EuiContextMenu extends Component {
     }
   }
 
+  mapIdsToRenderedItems = panels => {
+    this.idToRenderedItemsMap = {};
+
+    // Pre-rendering the items lets us check reference equality inside of EuiContextMenuPanel.
+    panels.forEach(panel => {
+      this.idToRenderedItemsMap[panel.id] = this.renderItems(panel.items);
+    });
+  };
+
   renderItems(items = []) {
     return items.map((item, index) => {
       const {
@@ -227,7 +238,7 @@ export class EuiContextMenu extends Component {
         transitionType={this.state.isOutgoingPanelVisible ? transitionType : undefined}
         transitionDirection={this.state.isOutgoingPanelVisible ? this.state.transitionDirection : undefined}
         hasFocus={transitionType === 'in'}
-        items={this.renderItems(panel.items)}
+        items={this.idToRenderedItemsMap[panelId]}
         initialFocusedItemIndex={this.state.isUsingKeyboardToNavigate ? this.state.focusedItemIndex : undefined}
         onUseKeyboardToNavigate={this.onUseKeyboardToNavigate}
         showNextPanel={this.showNextPanel}