Fix <HotkeyDialog /> exit animation (#221)

* Fix HotkeyDialog's closing transition

* Edit test to not check for hiding behavior (takes too long)

packages/core/src/components/hotkeys/hotkeysDialog.tsx

@@ -23,25 +23,23 @@ export interface IHotkeysDialogProps extends IDialogProps {
 }
 
 class HotkeysDialog {
-    public hotkeysDialogProps = {
+    public componentProps = {
         globalHotkeysGroup: "Global hotkeys",
     } as any as IHotkeysDialogProps;
-    public showing = false;
+
+    private container: HTMLElement;
     private hotkeysQueue = [] as IHotkeyProps[][];
+    private isDialogShowing = false;
     private timeoutToken = 0;
-    private container: HTMLElement;
 
-    public render(node: React.ReactElement<any>) {
-        return ReactDOM.render(node, this.getContainer());
-    }
-
-    public unmount = () => {
-        this.showing = false;
-        return ReactDOM.unmountComponentAtNode(this.getContainer());
+    public render() {
+        if (this.container == null) {
+            this.container = this.getContainer();
+        }
+        ReactDOM.render(this.renderComponent(), this.container) as React.Component<any, React.ComponentState>;
     }
 
-    public destroy = () => {
-        this.showing = false;
+    public unmount() {
         if (this.container != null) {
             ReactDOM.unmountComponentAtNode(this.container);
             this.container.remove();
@@ -62,7 +60,21 @@ class HotkeysDialog {
 
         // reset timeout for debounce
         clearTimeout(this.timeoutToken);
-        this.timeoutToken = setTimeout(this.renderHotkeysDialog, 10);
+        this.timeoutToken = setTimeout(this.show, 10);
+    }
+
+    public show = () => {
+        this.isDialogShowing = true;
+        this.render();
+    }
+
+    public hide = () => {
+        this.isDialogShowing = false;
+        this.render();
+    }
+
+    public isShowing() {
+        return this.isDialogShowing;
     }
 
     private getContainer() {
@@ -74,26 +86,25 @@ class HotkeysDialog {
         return this.container;
     }
 
-    private renderHotkeysDialog = () => {
-        this.showing = true;
-        this.render(
+    private renderComponent() {
+        return (
             <Dialog
-                {...this.hotkeysDialogProps}
-                className={classNames(this.hotkeysDialogProps.className, "pt-hotkey-dialog")}
+                {...this.componentProps}
+                className={classNames(this.componentProps.className, "pt-hotkey-dialog")}
                 inline
-                isOpen
-                onClose={this.unmount}
+                isOpen={this.isDialogShowing}
+                onClose={this.hide}
             >
                 <div className={Classes.DIALOG_BODY}>{this.renderHotkeys()}</div>
-            </Dialog>,
+            </Dialog>
         );
     }
 
     private renderHotkeys() {
         const hotkeys = this.emptyHotkeyQueue();
         const elements = hotkeys.map((hotkey, index) => {
             const group = (hotkey.global === true && hotkey.group == null) ?
-                this.hotkeysDialogProps.globalHotkeysGroup : hotkey.group;
+                this.componentProps.globalHotkeysGroup : hotkey.group;
 
             return <Hotkey key={index} {...hotkey} group={group} />;
         });
@@ -113,13 +124,13 @@ class HotkeysDialog {
 const HOTKEYS_DIALOG = new HotkeysDialog();
 
 export function isHotkeysDialogShowing() {
-    return HOTKEYS_DIALOG.showing;
+    return HOTKEYS_DIALOG.isShowing();
 }
 
 export function setHotkeysDialogProps(props: IHotkeysDialogProps) {
     for (const key in props) {
         if (props.hasOwnProperty(key)) {
-            (HOTKEYS_DIALOG.hotkeysDialogProps as any)[key] = (props as any)[key];
+            (HOTKEYS_DIALOG.componentProps as any)[key] = (props as any)[key];
         }
     }
 }
@@ -129,5 +140,5 @@ export function showHotkeysDialog(hotkeys: IHotkeyProps[]) {
 }
 
 export function hideHotkeysDialog() {
-    HOTKEYS_DIALOG.unmount();
+    HOTKEYS_DIALOG.hide();
 }

packages/core/test/hotkeys/hotkeysTests.tsx

@@ -114,19 +114,21 @@ describe("Hotkeys", () => {
         });
 
         it("triggers hotkey dialog with \"?\"", (done) => {
+            const TEST_TIMEOUT_DURATION = 30;
+
             comp = mount(<TestComponent />, { attachTo });
             const node = ReactDOM.findDOMNode(comp.instance());
 
             dispatchTestKeyboardEvent(node, "keydown", "/", true);
 
+            // wait for the dialog to animate in
             setTimeout(() => {
                 expect(document.querySelector(".pt-hotkey-column")).to.exist;
                 hideHotkeysDialog();
-                expect(document.querySelector(".pt-hotkey-column")).to.not.exist;
                 comp.detach();
                 attachTo.remove();
                 done();
-            }, 100);
+            }, TEST_TIMEOUT_DURATION);
         });
 
         it("can generate hotkey combo string from keyboard input", () => {