diff --git a/CHANGELOG.md b/CHANGELOG.md index f4538ceedaa..92e2ae3afd1 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,10 +1,12 @@ # [`master`](https://github.com/elastic/eui/tree/master) -No public interface changes since `0.0.22`. +**Bug fixes** + +- 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 index fcf9ee251da..a16c5e711a0 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}