From 9015d912fb1b3685e0599a9c5327ba20f19efb17 Mon Sep 17 00:00:00 2001
From: Philippe Duval <philippe@plot.ly>
Date: Mon, 23 Jul 2018 14:28:39 -0400
Subject: [PATCH] Fix display of ConfirmDialogProvider if not used in a
 callback.

---
 src/components/ConfirmDialog.react.js         | 51 ++++++++++++++-----
 src/components/ConfirmDialogProvider.react.js | 21 ++++++--
 2 files changed, 55 insertions(+), 17 deletions(-)

diff --git a/src/components/ConfirmDialog.react.js b/src/components/ConfirmDialog.react.js
index b7b7683ab..8cbc47df3 100644
--- a/src/components/ConfirmDialog.react.js
+++ b/src/components/ConfirmDialog.react.js
@@ -1,6 +1,7 @@
 import PropTypes from 'prop-types';
 import {Component} from 'react';
 
+
 /**
  * ConfirmDialog is used to display the browser's native "confirm" modal,
  * with an optional message and two buttons ("OK" and "Cancel").
@@ -11,30 +12,54 @@ export default class ConfirmDialog extends Component {
 
     constructor(props) {
         super(props);
+        this.state = {
+            displayed: props.displayed
+        };
+        this._setStateAndProps = this._setStateAndProps.bind(this);
+        this._update = this._update.bind(this);
+        // this._update();
     }
 
-    componentDidUpdate() {
+    _setStateAndProps(value) {
+        const { setProps } = this.props;
+        this.setState(value);
+        if (setProps) setProps(value);
+    }
+
+    componentWillReceiveProps(props) {
+        this.setState({displayed: props.displayed})
+    }
+
+    _update() {
         const {
-            displayed, message, setProps,
+            message,
             cancel_n_clicks, cancel_n_clicks_timestamp,
             submit_n_clicks, submit_n_clicks_timestamp
         } = this.props;
 
+        const displayed = this.state.displayed;
+
         if (displayed) {
-            new Promise(resolve => resolve(window.confirm(message))).then(result => setProps({
-                cancel_n_clicks: !result ?
-                    cancel_n_clicks + 1 : cancel_n_clicks,
-                cancel_n_clicks_timestamp: !result ?
-                    Date.now() :  cancel_n_clicks_timestamp,
-                submit_n_clicks: result ?
-                    submit_n_clicks + 1: submit_n_clicks,
-                submit_n_clicks_timestamp: result ?
-                    Date.now() : submit_n_clicks_timestamp,
-                displayed: false
-            }));
+            new Promise(resolve => resolve(window.confirm(message))).then(result => {
+                this._setStateAndProps({
+                    cancel_n_clicks: !result ?
+                        cancel_n_clicks + 1 : cancel_n_clicks,
+                    cancel_n_clicks_timestamp: !result ?
+                        Date.now() :  cancel_n_clicks_timestamp,
+                    submit_n_clicks: result ?
+                        submit_n_clicks + 1: submit_n_clicks,
+                    submit_n_clicks_timestamp: result ?
+                        Date.now() : submit_n_clicks_timestamp,
+                    displayed: false
+                });
+            });
         }
     }
 
+    componentDidUpdate() {
+        this._update()
+    }
+
     render() {
         return null;
     }
diff --git a/src/components/ConfirmDialogProvider.react.js b/src/components/ConfirmDialogProvider.react.js
index b09e3bac5..29fa0a867 100644
--- a/src/components/ConfirmDialogProvider.react.js
+++ b/src/components/ConfirmDialogProvider.react.js
@@ -18,15 +18,26 @@ import ConfirmDialog from './ConfirmDialog.react'
  * ```
  */
 export default class ConfirmDialogProvider extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = {displayed: props.displayed};
+    }
+
+    componentWillReceiveProps(props) {
+        this.setState({displayed: props.displayed})
+    }
+
     render() {
         const { id, setProps, children } = this.props;
 
+        const displayed = this.state.displayed;
+
         // Will lose the previous onClick of the child
         const wrapClick = (child) => React.cloneElement(child, {onClick: () =>
             {
-                setProps({
-                    displayed: true
-                });
+                const update = {displayed: true};
+                this.setState(update);
+                if (setProps) setProps(update);
             }
         });
 
@@ -41,7 +52,9 @@ export default class ConfirmDialogProvider extends React.Component {
                         ? realChild.map(wrapClick)
                         : wrapClick(realChild)
                 }
-                <ConfirmDialog {...this.props}/>
+                <ConfirmDialog
+                    {...this.props}
+                    displayed={displayed}/>
             </div>
         )
     }