Properly cancel keydown events after handling (#344)

* Properly cancel keydown events after handling

* Add changelog entry

* Add missing components

CHANGELOG.md

@@ -28,6 +28,10 @@
 
 - Added `react-color` as a dependency (was previously a devDependency) ([#354](https://github.com/elastic/eui/pull/354))
 
+**Bug fixes**
+
+- Stop propagation and prevent default when closing components. Otherwise the same Escape keypress could close the parent component(s) as well as the one you intend to close. [(#344)](https://github.com/elastic/eui/pull/344)
+
 # [`0.0.15`](https://github.com/elastic/eui/tree/v0.0.15)
 
 - Added `EuiColorPicker`. ([#328](https://github.com/elastic/eui/pull/328))

src/components/code/_code_block.js

@@ -58,6 +58,8 @@ export class EuiCodeBlockImpl extends Component {
 
   onKeyDown = event => {
     if (event.keyCode === keyCodes.ESCAPE) {
+      event.preventDefault();
+      event.stopPropagation();
       this.closeFullScreen();
     }
   };

src/components/context_menu/context_menu_panel.js

@@ -88,6 +88,8 @@ export class EuiContextMenuPanel extends Component {
     ) {
       if (e.keyCode === cascadingMenuKeyCodes.LEFT) {
         if (this.props.showPreviousPanel) {
+          e.preventDefault();
+          e.stopPropagation();
           this.props.showPreviousPanel();
 
           if (this.props.onUseKeyboardToNavigate) {

src/components/flyout/flyout.js

@@ -22,6 +22,8 @@ export const SIZES = Object.keys(sizeToClassNameMap);
 export class EuiFlyout extends Component {
   onKeyDown = event => {
     if (event.keyCode === keyCodes.ESCAPE) {
+      event.preventDefault();
+      event.stopPropagation();
       this.props.onClose();
     }
   };

src/components/image/image.js

@@ -42,6 +42,8 @@ export class EuiImage extends Component {
 
   onKeyDown = event => {
     if (event.keyCode === keyCodes.ESCAPE) {
+      event.preventDefault();
+      event.stopPropagation();
       this.closeFullScreen();
     }
   };

src/components/modal/modal.js

@@ -10,6 +10,8 @@ import { keyCodes } from '../../services';
 export class EuiModal extends Component {
   onKeyDown = event => {
     if (event.keyCode === keyCodes.ESCAPE) {
+      event.preventDefault();
+      event.stopPropagation();
       this.props.onClose();
     }
   };

src/components/popover/popover.js

@@ -44,6 +44,8 @@ export class EuiPopover extends Component {
 
   onKeyDown = e => {
     if (e.keyCode === cascadingMenuKeyCodes.ESCAPE) {
+      e.preventDefault();
+      e.stopPropagation();
       this.props.closePopover();
     }
   };