Merge pull request #51 from b2io/radio-button-fix-pr

fix(display): Radio Button visual selection lost on drag
michaelmalonenz · Dec 1, 2018 · f324e1c · f324e1c
2 parents 6e3705d + 0ef03a2
commit f324e1c
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 2 deletions.
diff --git a/src/dragula.js b/src/dragula.js
@@ -194,6 +194,18 @@ export class Dragula {
     }
   }
 
+  _cloneNodeWithoutCheckedRadios(el) {
+    var mirror = el.cloneNode(true);
+    var mirrorInputs = mirror.getElementsByTagName('input');
+    var len = mirrorInputs.length;
+    for (var i = 0; i < len; i++) {
+      if (mirrorInputs[i].type === 'radio') {
+        mirrorInputs[i].checked = false;
+      }
+    }
+    return mirror;
+  }
+
   manualStart (item) {
     let context = this._canStart(item)
     if (context) {
@@ -203,7 +215,7 @@ export class Dragula {
 
   start (context) {
     if (this._isCopy(context.item, context.source)) {
-      this._copy = context.item.cloneNode(true)
+      this._copy = this._cloneNodeWithoutCheckedRadios(context.item)
       this._emitter.emit('cloned', this._copy, context.item, 'copy', Util.getViewModel(context.item))
     }
 
@@ -435,7 +447,7 @@ export class Dragula {
       return
     }
     let rect = this._item.getBoundingClientRect()
-    this._mirror = this._item.cloneNode(true)
+    this._mirror = this._cloneNodeWithoutCheckedRadios(this._item)
     this._mirror.style.width = Util.getRectWidth(rect) + 'px'
     this._mirror.style.height = Util.getRectHeight(rect) + 'px'
     classes.rm(this._mirror, 'gu-transit')

diff --git a/test/unit/drag.spec.js b/test/unit/drag.spec.js
@@ -190,6 +190,24 @@ describe('drag', function () {
     expect(document.body.className).toBe('gu-unselectable', 'body has gu-unselectable class')
   })
 
+  test('when dragging, source radio inputs retain their checked attribute', function (t) {
+    var div = document.createElement('div');
+    var item = document.createElement('div');
+    var drake = dragula([div]);
+    item.innerHTML = '<em><input type=radio name=foo checked /></em>';
+    div.appendChild(item);
+    document.body.appendChild(div);
+    drake.on('cloned', cloned);
+    events.raise(item, 'mousedown', { which: 1 });
+    events.raise(item, 'mousemove', { which: 1 });
+    t.plan(4);
+    t.end();
+    function cloned (mirror) {
+      t.equal(item.getElementsByTagName('input')[0].checked, true, 'source radio is still checked');
+      t.equal(mirror.getElementsByTagName('input')[0].checked, false, 'mirror radio is not checked');
+    }
+  });
+
   it('when dragging, element gets a mirror image for show', function () {
     let div = document.createElement('div')
     let item = document.createElement('div')