feat: close maximized panels with escape key (#2533)

fixes: #1165

Was annoyed with this while working on something, add handling to escape
close maximize fields.

Exclude if inputs are focused (ex. monaco uses escape to deselect, but
doesn't consume it, native searches clear field but don't consume it
either).

Author: dsmmcken

packages/golden-layout/src/LayoutManager.ts

@@ -170,6 +170,7 @@ export class LayoutManager extends EventEmitter {
     this._onUnload = this._onUnload.bind(this);
     this._windowBlur = this._windowBlur.bind(this);
     this._windowFocus = this._windowFocus.bind(this);
+    this._windowKeydown = this._windowKeydown.bind(this);
 
     this.config = this._createConfig(config);
     this._originalContainer = container;
@@ -498,6 +499,7 @@ export class LayoutManager extends EventEmitter {
     $(window).off('resize', this._onResize);
     $(window).off('unload beforeunload', this._onUnload);
     $(window).off('blur.lm').off('focus.lm');
+    $(window).off('keydown', this._windowKeydown);
     this.root.callDownwards('_$destroy', [], true);
     this.root.contentItems = [];
     this.tabDropPlaceholder.remove();
@@ -1023,7 +1025,8 @@ export class LayoutManager extends EventEmitter {
     $(window)
       .on('unload beforeunload', this._onUnload)
       .on('blur.lm', this._windowBlur)
-      .on('focus.lm', this._windowFocus);
+      .on('focus.lm', this._windowFocus)
+      .on('keydown', this._windowKeydown);
   }
 
   /**
@@ -1037,6 +1040,31 @@ export class LayoutManager extends EventEmitter {
     this.root.element.removeClass('lm_window_blur');
   }
 
+  /**
+   * Handles the escape key to close maximized items, as long as the focus isn't within an input.
+   * The escape key has local behaviors in inputs like the Monaco editor or search that we don't
+   * want to react to as they are not captured.
+   *
+   * @private
+   * @param e The keydown event
+   */
+  _windowKeydown(e: JQuery.KeyDownEvent) {
+    if (e.key === 'Escape' && this._maximisedItem !== null) {
+      const active = document.activeElement;
+      if (
+        active &&
+        (active.tagName === 'INPUT' ||
+          active.tagName === 'TEXTAREA' ||
+          active.tagName === 'SELECT' ||
+          (active as HTMLElement).isContentEditable)
+      ) {
+        return;
+      }
+
+      this._maximisedItem.toggleMaximise();
+    }
+  }
+
   /**
    * Debounces resize events
    */

packages/grid/src/key-handlers/SelectionKeyHandler.ts

@@ -96,10 +96,10 @@ class SelectionKeyHandler extends KeyHandler {
         return true;
       }
       case 'Escape':
+        if (grid.state.selectedRanges.length === 0) return false;
         grid.clearSelectedRanges();
-        // Event consumed, but propagation not stopped
-        // so the shortcut could be handled by the global handler
-        return { preventDefault: false, stopPropagation: false };
+        // consume the event, and stop propagation only if there were selected ranges to clear
+        return { preventDefault: false, stopPropagation: true };
       case 'Enter':
         if (grid.state.selectedRanges.length > 0) {
           grid.moveCursorInDirection(