diff --git a/package.json b/package.json
index f4adaf6e..10e9fc51 100644
--- a/package.json
+++ b/package.json
@@ -25,6 +25,7 @@
     "test:jest": "jest",
     "test": "npm run test:eslint && npm run test:prettier && npm run test:jest",
     "clean": "rm -rf __tests__ PivotTable.js* PivotTableUI.js* PlotlyRenderers.js* TableRenderers.js* Utilities.js* pivottable.css",
+    "prepare": "npm run build",
     "build": "npm run clean && cp src/pivottable.css . && babel src --out-dir=. --source-maps --presets=env,react --plugins babel-plugin-add-module-exports",
     "doPublish": "npm run build && npm publish",
     "postpublish": "npm run clean",
@@ -47,7 +48,7 @@
   "dependencies": {
     "immutability-helper": "^2.3.1",
     "prop-types": "^15.5.10",
-    "react-draggable": "^3.0.3",
+    "react-draggable": "^4.5.0",
     "react-sortablejs": "^1.3.4",
     "sortablejs": "^1.6.1"
   },
diff --git a/src/PivotTableUI.jsx b/src/PivotTableUI.jsx
index 0de055f4..ad88db50 100644
--- a/src/PivotTableUI.jsx
+++ b/src/PivotTableUI.jsx
@@ -13,6 +13,7 @@ export class DraggableAttribute extends React.Component {
   constructor(props) {
     super(props);
     this.state = {open: false, filterText: ''};
+    this.nodeRef = React.createRef();
   }
 
   toggleValue(value) {
@@ -48,8 +49,9 @@ export class DraggableAttribute extends React.Component {
       .sort(this.props.sorter);
 
     return (
-      <Draggable handle=".pvtDragHandle">
+      <Draggable handle=".pvtDragHandle" nodeRef={this.nodeRef}>
         <div
+          ref={this.nodeRef}
           className="pvtFilterBox"
           style={{
             display: 'block',