fix: placeholder is not rendered until mouse has moved (issue #73) (#74)

jasonslyvia · Nov 4, 2016 · 1ec1732 · 1ec1732
1 parent 04c09a9
commit 1ec1732
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 1 deletion.
diff --git a/src/index.js b/src/index.js
@@ -428,7 +428,7 @@ const Sortable = React.createClass({
         return;
       }
 
-      if (index === this._draggingIndex) {
+      if (index === this._draggingIndex && this.state.isDragging) {
         draggingItem = this.renderDraggingItem(item);
       }
 

diff --git a/test/specs/sortable-test.js b/test/specs/sortable-test.js
@@ -687,5 +687,53 @@ describe('Sortable', () => {
       expect(inputs[2].value).to.equal('foo');
     });
   });
+
+  describe('Dragging children with dynamic', () => {
+    let component, target;
+
+    beforeEach(() => {
+
+    });
+
+    afterEach(() => {
+      ReactDOM.unmountComponentAtNode(document.getElementById('react'));
+      component = null;
+      target = null;
+    });
+
+    it('should add a dragging children if mouse is moved', () => {
+
+      component = ReactDOM.render(
+        <Sortable className="style-for-test" dynamic>
+          <DemoItem sortData="1" className="item-1">1</DemoItem>
+          <DemoItem sortData="2" className="item-2">2</DemoItem>
+          <DemoItem sortData="3" className="item-3">3</DemoItem>
+        </Sortable>
+      , document.getElementById('react'));
+
+      target = document.querySelector('.ui-sortable-item');
+
+      triggerEvent(target, 'mousedown', {
+        clientX: 11,
+        clientY: 11,
+      });
+
+      component = ReactDOM.render(
+        <Sortable className="style-for-test" dynamic>
+          <DemoItem sortData="1" className="item-1">1</DemoItem>
+          <DemoItem sortData="2" className="item-2">2</DemoItem>
+          <DemoItem sortData="3" className="item-3">3</DemoItem>
+        </Sortable>
+      , document.getElementById('react'));
+
+      const children = ReactDOM.findDOMNode(component).querySelectorAll('.ui-sortable-item');
+      expect(children.length).to.equal(3);
+
+      triggerEvent(target, 'mousemove');
+
+      const childrenAfter = ReactDOM.findDOMNode(component).querySelectorAll('.ui-sortable-item');
+      expect(childrenAfter.length).to.equal(4);
+    });
+  });
 });