Skip to content

Commit

Permalink
Fix EuiContextMenu bug in which the menu items were continuously re-r…
Browse files Browse the repository at this point in the history
…endered causing their refs to be cleared.
  • Loading branch information
cjcenizal committed Feb 21, 2018
1 parent f5fca8f commit 20dddd7
Showing 1 changed file with 12 additions and 1 deletion.
13 changes: 12 additions & 1 deletion src/components/context_menu/context_menu.js
Original file line number Diff line number Diff line change
Expand Up @@ -69,6 +69,7 @@ export class EuiContextMenu extends Component {
this.idToPanelMap = {};
this.idToPreviousPanelIdMap = {};
this.idAndItemIndexToPanelIdMap = {};
this.idToRenderedItemsMap = {};

this.state = {
height: undefined,
Expand Down Expand Up @@ -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() {
Expand All @@ -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 {
Expand Down Expand Up @@ -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}
Expand Down

0 comments on commit 20dddd7

Please sign in to comment.