[FIX] web: remove extra space in kanban dragging images

addons/web/static/src/js/views/kanban/kanban_column.js

@@ -114,14 +114,22 @@ var KanbanColumn = Widget.extend({
                 revert: 0,
                 delay: 0,
                 items: '> .o_kanban_record:not(.o_updating)',
-                helper: 'clone',
                 cursor: 'move',
                 over: function () {
                     self.$el.addClass('o_kanban_hover');
                 },
                 out: function () {
                     self.$el.removeClass('o_kanban_hover');
                 },
+                start: function (event, ui) {
+                    ui.item.addClass('o_currently_dragged');
+                },
+                stop: function (event, ui) {
+                    var item = ui.item;
+                    setTimeout(function () {
+                        item.removeClass('o_currently_dragged');
+                    });
+                },
                 update: function (event, ui) {
                     var record = ui.item.data('record');
                     var index = self.records.indexOf(record);

addons/web/static/src/js/views/kanban/kanban_record.js

@@ -5,7 +5,6 @@ odoo.define('web.KanbanRecord', function (require) {
  * This file defines the KanbanRecord widget, which corresponds to a card in
  * a Kanban view.
  */
-
 var config = require('web.config');
 var core = require('web.core');
 var Domain = require('web.Domain');
@@ -210,6 +209,11 @@ var KanbanRecord = Widget.extend({
      * @private
      */
     _openRecord: function () {
+        if (this.$el.hasClass('o_currently_dragged')) {
+            // this record is currently being dragged and dropped, so we do not
+            // want to open it.
+            return;
+        }
         var editMode = this.$el.hasClass('oe_kanban_global_click_edit');
         this.trigger_up('open_record', {
             id: this.db_id,

addons/web/static/tests/helpers/test_utils_dom.js

@@ -17,6 +17,10 @@ odoo.define('web.test_utils_dom', function () {
  * events, but it is enough to help test drag and drop operations with jqueryUI
  * sortable.
  *
+ * @todo: remove the withTrailingClick option when the jquery update branch is
+ *   merged.  This is not the default as of now, because handlers are triggered
+ *   synchronously, which is not the same as the 'reality'.
+ *
  * @param {jqueryElement} $el
  * @param {jqueryElement} $to
  * @param {Object} [options]
@@ -27,9 +31,13 @@ odoo.define('web.test_utils_dom', function () {
  * @param {boolean} [options.continueMove=false] whether to trigger the
  *   mousedown action (will only work after another call of this function with
  *   without this option)
+ * @param {boolean} [options.withTrailingClick=false] if true, this utility
+ *   function will also trigger a click on the target after the mouseup event
+ *   (this is actually what happens when a drag and drop operation is done)
  */
 function dragAndDrop($el, $to, options) {
-    var position = (options && options.position) || 'center';
+    options = options || {};
+    var position = options.position || 'center';
     var elementCenter = $el.offset();
     var toOffset = $to.offset();
 
@@ -58,7 +66,7 @@ function dragAndDrop($el, $to, options) {
         toOffset.top += bound.top;
     }
     $el.trigger($.Event("mouseenter"));
-    if (!(options && options.continueMove)) {
+    if (!(options.continueMove)) {
         elementCenter.left += $el.outerWidth() / 2;
         elementCenter.top += $el.outerHeight() / 2;
 
@@ -75,12 +83,15 @@ function dragAndDrop($el, $to, options) {
         pageY: toOffset.top
     }));
 
-    if (!(options && options.disableDrop)) {
+    if (!options.disableDrop) {
         $el.trigger($.Event("mouseup", {
             which: 1,
             pageX: toOffset.left,
             pageY: toOffset.top
         }));
+        if (options.withTrailingClick) {
+            $el.click();
+        }
     } else {
         // It's impossible to drag another element when one is already
         // being dragged. So it's necessary to finish the drop when the test is

addons/web/static/tests/views/kanban_tests.js

@@ -2300,6 +2300,12 @@ QUnit.module('Views', {
     QUnit.test('can drag and drop a record from one column to the next', function (assert) {
         assert.expect(9);
 
+        // @todo: remove this resequenceDef whenever the jquery upgrade branch
+        // is merged.  This is currently necessary to simulate the reality: we
+        // need the click handlers to be executed after the end of the drag and
+        // drop operation, not before.
+        var resequenceDef = $.Deferred();
+
         var envIDs = [1, 3, 2, 4]; // the ids that should be in the environment during this test
         this.data.partner.fields.sequence = {type: 'number', string: "Sequence"};
         var kanban = createView({
@@ -2309,7 +2315,7 @@ QUnit.module('Views', {
             arch: '<kanban class="o_kanban_test" on_create="quick_create">' +
                         '<field name="product_id"/>' +
                         '<templates><t t-name="kanban-box">' +
-                            '<div><field name="foo"/>' +
+                            '<div class="oe_kanban_global_click"><field name="foo"/>' +
                                 '<t t-if="widget.editable"><span class="thisiseditable">edit</span></t>' +
                             '</div>' +
                         '</t></templates>' +
@@ -2318,7 +2324,7 @@ QUnit.module('Views', {
             mockRPC: function (route, args) {
                 if (route === '/web/dataset/resequence') {
                     assert.ok(true, "should call resequence");
-                    return $.when(true);
+                    return resequenceDef.then(_.constant(true));
                 }
                 return this._super(route, args);
             },
@@ -2338,8 +2344,9 @@ QUnit.module('Views', {
         var $record = kanban.$('.o_kanban_group:nth-child(1) .o_kanban_record:first');
         var $group = kanban.$('.o_kanban_group:nth-child(2)');
         envIDs = [3, 2, 4, 1]; // first record of first column moved to the bottom of second column
-        testUtils.dragAndDrop($record, $group);
+        testUtils.dragAndDrop($record, $group, {withTrailingClick: true});
 
+        resequenceDef.resolve();
         assert.strictEqual(kanban.$('.o_kanban_group:nth-child(1) .o_kanban_record').length, 1,
                         "column should now contain 1 record(s)");
         assert.strictEqual(kanban.$('.o_kanban_group:nth-child(2) .o_kanban_record').length, 3,