initial handleKeyDown in GlobalModalContainer

Signum.React/Scripts/Frames/ButtonBar.tsx

@@ -13,13 +13,7 @@ export default class ButtonBar extends React.Component<ButtonBarProps>{
 
   static onButtonBarRender: Array<(ctx: ButtonsContext) => Array<ButtonBarElement | undefined> | undefined> = [];
 
-  componentDidMount() {
-    window.addEventListener("keydown", this.hanldleKeyDown);
-  }
-
-  componentWillUnmount() {
-    window.removeEventListener("keydown", this.hanldleKeyDown);
-  }
+
 
   hanldleKeyDown = (e: KeyboardEvent) => {
     var s = this.shortcuts;

Signum.React/Scripts/Frames/FrameModal.tsx

@@ -1,6 +1,6 @@
 
 import * as React from 'react'
-import { openModal, IModalProps } from '../Modals'
+import { openModal, IModalProps, IHandleKeyboard } from '../Modals'
 import MessageModal from '../Modals/MessageModal'
 import * as Navigator from '../Navigator'
 import ButtonBar from './ButtonBar'
@@ -48,7 +48,7 @@ interface FrameModalState {
 
 let modalCount = 0;
 
-export default class FrameModal extends React.Component<FrameModalProps, FrameModalState>  {
+export default class FrameModal extends React.Component<FrameModalProps, FrameModalState> implements IHandleKeyboard  {
   prefix = "modal" + (modalCount++);
 
   static defaultProps: FrameModalProps = {
@@ -77,6 +77,9 @@ export default class FrameModal extends React.Component<FrameModalProps, FrameMo
       .done();
   }
 
+  handleKeyDown(e: KeyboardEvent) {
+    this.buttonBar && this.buttonBar.hanldleKeyDown(e);
+  }
 
   getTypeName() {
     return (this.props.entityOrPack as Lite<Entity>).EntityType ||
@@ -230,6 +233,8 @@ export default class FrameModal extends React.Component<FrameModalProps, FrameMo
     }
   }
 
+  buttonBar?: ButtonBar | null;
+
   renderBody() {
 
     const frame: EntityFrame = {

Signum.React/Scripts/Frames/FramePage.tsx

@@ -35,6 +35,10 @@ export default class FramePage extends React.Component<FramePageProps, FramePage
     this.load(this.props);
   }
 
+  componentDidMount() {
+    window.addEventListener("keydown", this.hanldleKeyDown);
+  }
+
   getTypeInfo(): TypeInfo {
     return getTypeInfo(this.props.match.params.type);
   }
@@ -59,6 +63,12 @@ export default class FramePage extends React.Component<FramePageProps, FramePage
 
   componentWillUnmount() {
     Navigator.setTitle();
+    window.removeEventListener("keydown", this.hanldleKeyDown);
+  }
+
+  hanldleKeyDown = (e: KeyboardEvent) => {
+    if (!e.defaultPrevented)
+      this.buttonBar && this.buttonBar.hanldleKeyDown(e);
   }
 
   load(props: FramePageProps) {
@@ -131,6 +141,8 @@ export default class FramePage extends React.Component<FramePageProps, FramePage
     }
   }
 
+  buttonBar?: ButtonBar | null;
+
   render() {
 
     if (!this.state.pack) {
@@ -186,7 +198,7 @@ export default class FramePage extends React.Component<FramePageProps, FramePage
       <div className="normal-control">
         {this.renderTitle()}
         {renderWidgets(wc)}
-        {this.entityComponent && <ButtonBar frame={frame} pack={this.state.pack} />}
+        {this.entityComponent && <ButtonBar ref={bb => this.buttonBar = bb} frame={frame} pack={this.state.pack} />}
         <ValidationErrors entity={this.state.pack.entity} ref={ve => this.validationErrors = ve} prefix="framePage" />
         {embeddedWidgets.top}
         <div className="sf-main-control" data-test-ticks={new Date().valueOf()} data-main-entity={entityInfo(ctx.value)}>

Signum.React/Scripts/Modals.tsx

@@ -2,18 +2,25 @@ import * as Navigator from './Navigator';
 
 import * as React from 'react'
 import { FunctionalAdapter } from './Frames/FrameModal';
+import { Modal } from 'react-overlays';
 
 export interface IModalProps {
   onExited?: (val: any) => void;
 }
 
+
+export interface IHandleKeyboard {
+  handleKeyDown?: (e: KeyboardEvent) => void;
+}
+
 export interface GlobalModalContainerState {
   modals: React.ReactElement<IModalProps>[];
   currentUrl: string;
 }
 
 let current: GlobalModalContainer;
-let modalInstances: React.Component[] = [];
+
+let modalInstances: (React.Component & IHandleKeyboard)[] = [];
 
 export class GlobalModalContainer extends React.Component<{}, GlobalModalContainerState> {
   constructor(props: {}) {
@@ -22,6 +29,25 @@ export class GlobalModalContainer extends React.Component<{}, GlobalModalContain
     current = this;
   }
 
+  componentDidMount() {
+    window.addEventListener("keydown", this.hanldleKeyDown);
+  }
+
+  componentWillUnmount() {
+    window.removeEventListener("keydown", this.hanldleKeyDown);
+  }
+
+  hanldleKeyDown = (e: KeyboardEvent) => {
+    if (modalInstances.length) {
+      e.preventDefault();
+      var topMost = modalInstances[modalInstances.length - 1];
+
+      if (topMost.handleKeyDown) {
+        topMost.handleKeyDown(e);
+      }
+    }
+  }
+
   componentWillReceiveProps(nextProps: {}, nextContext: any): void {
     var newUrl = Navigator.history.location.pathname;
 
@@ -44,7 +70,8 @@ export function openModal<T>(modal: React.ReactElement<IModalProps>): Promise<T
       resolve(val);
     }
 
-    cloned = React.cloneElement(modal, { onExited: onExited, key: current.state.modals.length } as any);
+    cloned = FunctionalAdapter.withRef(React.cloneElement(modal, { onExited: onExited, key: current.state.modals.length } as any),
+      c => c ? modalInstances.push(c) : modalInstances.pop());
 
     current.state.modals.push(cloned);
     current.forceUpdate();

Signum.React/Scripts/SelectorModal.tsx

@@ -1,4 +1,3 @@
-
 import * as React from 'react'
 import { openModal, IModalProps } from './Modals';
 import { SelectorMessage } from './Signum.Entities'