Add open delay to recent request dialog

packages/insomnia-app/app/ui/components/modals/request-switcher-modal.js

@@ -19,6 +19,7 @@ import { hotKeyRefs } from '../../../common/hotkeys';
 import { executeHotKey } from '../../../common/hotkeys-listener';
 import KeydownBinder from '../keydown-binder';
 import type { RequestMeta } from '../../../models/request-meta';
+import { keyboardKeys } from '../../../common/keyboard-keys';
 
 type Props = {
   handleSetActiveWorkspace: (id: string) => void,
@@ -47,12 +48,11 @@ type State = {
 class RequestSwitcherModal extends React.PureComponent<Props, State> {
   modal: ?Modal;
   _input: ?HTMLInputElement;
-  _keysPressed: { [string]: boolean };
+  _openTimeout: TimeoutID;
 
   constructor(props: Props) {
     super(props);
 
-    this._keysPressed = {};
     this.state = {
       searchString: '',
       workspaces: [],
@@ -272,6 +272,7 @@ class RequestSwitcherModal extends React.PureComponent<Props, State> {
       disableInput?: boolean,
       selectOnKeyup?: boolean,
       title?: string,
+      openDelay?: number,
     } = {},
   ) {
     if (this.modal && this.modal.isOpen()) {
@@ -288,12 +289,15 @@ class RequestSwitcherModal extends React.PureComponent<Props, State> {
 
     await this._handleChangeValue('');
 
-    this.modal && this.modal.show();
+    this._openTimeout = setTimeout(() => {
+      this.modal && this.modal.show();
+    }, options.openDelay || 0);
 
     setTimeout(() => this._input && this._input.focus(), 100);
   }
 
   hide() {
+    clearTimeout(this._openTimeout);
     this.modal && this.modal.hide();
   }
 
@@ -305,13 +309,13 @@ class RequestSwitcherModal extends React.PureComponent<Props, State> {
     }
   }
 
-  _handleHide() {
-    // Safety net in case we miss a keyup or something.
-    this._keysPressed = {};
-  }
-
   _handleKeydown(e: KeyboardEvent) {
-    this._keysPressed[e.keyCode + ''] = true;
+    if (e.keyCode === keyboardKeys.esc.keyCode) {
+      this.hide();
+      console.log('hide');
+      return;
+    }
+
     executeHotKey(e, hotKeyRefs.SHOW_RECENT_REQUESTS, () => {
       this._setActiveIndex(this.state.activeIndex + 1);
     });
@@ -324,9 +328,10 @@ class RequestSwitcherModal extends React.PureComponent<Props, State> {
   _handleKeyup(e: KeyboardEvent) {
     const { selectOnKeyup } = this.state;
 
-    delete this._keysPressed[e.keyCode + ''];
-
-    if (selectOnKeyup && Object.keys(this._keysPressed).length === 0) {
+    // Handle selection if unpresses all modifier keys. Ideally this would trigger once
+    // the user unpresses the hotkey that triggered this modal but we currently do not
+    // have the facilities to do that.
+    if (selectOnKeyup && !e.ctrlKey && !e.shiftKey && !e.metaKey && !e.altKey) {
       this._activateCurrentIndex();
       this.hide();
     }
@@ -347,7 +352,7 @@ class RequestSwitcherModal extends React.PureComponent<Props, State> {
 
     return (
       <KeydownBinder onKeydown={this._handleKeydown} onKeyup={this._handleKeyup}>
-        <Modal ref={this._setModalRef} dontFocus={!disableInput} onHide={this._handleHide}>
+        <Modal ref={this._setModalRef} dontFocus={!disableInput}>
           <ModalHeader hideCloseButton>
             {title || (
               <React.Fragment>

packages/insomnia-app/app/ui/containers/app.js

@@ -129,6 +129,9 @@ class App extends PureComponent {
             maxWorkspaces: 0,
             selectOnKeyup: true,
             title: 'Recent Requests',
+
+            // Add an open delay so the dialog won't show for quick presses
+            openDelay: 150,
           });
         },
       ],