Fix EuiContextMenu bug in which the menu items were continuously re-r…

…endered causing their refs to be cleared.
elastic · Feb 21, 2018 · 5a841e8 · 5a841e8
1 parent f5fca8f
commit 5a841e8
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 3 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,10 +1,10 @@
 # [`master`](https://github.com/elastic/eui/tree/master)
 
-No public interface changes since `0.0.22`.
+- Fixed `EuiContextMenu` bug when using the keyboard to navigate up, which was caused by unnecessarily re-rendering the items, thus losing references to them ([#431](https://github.com/elastic/eui/pull/431))
 
 # [`0.0.22`](https://github.com/elastic/eui/tree/v0.0.22)
 
-- Added `EuiDelayHide` component. [#412](https://github.com/elastic/eui/pull/412)
+- Added `EuiDelayHide` component. ([#412](https://github.com/elastic/eui/pull/412))
 - Decreased overall size of checkbox, radio, and switches as well as better styles for the different states. ([#407](https://github.com/elastic/eui/pull/407))
 - Added `EuiFilePicker` component for `input type="file"` needs. ([#402](https://github.com/elastic/eui/pedull/402))
 - Add `isLoading` prop to `EuiButton` ([#427](https://github.com/elastic/eui/pull/427))

diff --git 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}