From e91b88cea6d9da55216c585c9d732b9137c5e2fd Mon Sep 17 00:00:00 2001
From: Federico Freire <freire.federico@gmail.com>
Date: Tue, 19 Dec 2017 13:06:10 +0100
Subject: [PATCH] Add stopPropagation call when resizing

---
 README.md          | 15 +++++++++++++++
 lib/Resizable.js   |  2 ++
 test/TestLayout.js |  8 ++++++++
 3 files changed, 25 insertions(+)

diff --git a/README.md b/README.md
index 6e336301..ef9d7d17 100644
--- a/README.md
+++ b/README.md
@@ -62,3 +62,18 @@ These props apply to both `<Resizable>` and `<ResizableBox>`.
   draggableOpts?: ?Object
 };
 ```
+
+### Drag and resize
+
+This library already implements [react-draggable](https://github.com/mzabriskie/react-draggable) for handling the resizing.
+If you want to use a `react-resizable` box inside a `react-draggable` control, you should wrap the resizable control around a `div`:
+
+```
+<Draggable>
+  <div>
+    <ResizableBox>
+      <span>Resizable and draggable</span>
+    </ResizableBox>
+  </div>
+</Draggable>
+```
\ No newline at end of file
diff --git a/lib/Resizable.js b/lib/Resizable.js
index 51522976..c1fb0aa4 100644
--- a/lib/Resizable.js
+++ b/lib/Resizable.js
@@ -195,6 +195,8 @@ export default class Resizable extends React.Component<Props, State> {
       } else {
         this.setState(newState);
       }
+
+      e.stopPropagation();
     };
   }
 
diff --git a/test/TestLayout.js b/test/TestLayout.js
index 566ffaf2..7b7203b0 100644
--- a/test/TestLayout.js
+++ b/test/TestLayout.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import Resizable from '../lib/Resizable';
+import Draggable from 'react-draggable';
 import ResizableBox from '../lib/ResizableBox';
 import 'style-loader!css-loader!../css/styles.css';
 
@@ -54,6 +55,13 @@ export default class TestLayout extends React.Component<{}, {width: number, heig
           <ResizableBox className="box" width={200} height={200} axis="none">
             <span className="text">Not resizable ("none" axis).</span>
           </ResizableBox>
+          <Draggable>
+            <div>
+              <ResizableBox className="box" width={200} height={200}>
+                <span className="text">Both resizable and draggable</span>
+              </ResizableBox>
+            </div>
+          </Draggable>
         </div>
       </div>
     );