From 0ff2087fb9af17ef2359b3912d424b4ece20951f Mon Sep 17 00:00:00 2001 From: Aaron Bohy Date: Thu, 6 Sep 2018 10:52:55 +0200 Subject: [PATCH] [FIX] web: FieldMany2ManyTags: fix broken colorpicker Before this rev., if the user clicked on a tag to open the color picker, and then clicked in the dropdown, but not on a color, the color picker closed itself, and it was no longer possible to open it again. This issue came with the migration to BS4 and its following fixes. As the color picker is now a classical BS dropdown, it closes itself automatically, so we don't need to manually close it on focusout. Task 1878254. --- .../static/src/js/fields/relational_fields.js | 9 +- .../tests/fields/relational_fields_tests.js | 114 +++++++++++++++++- 2 files changed, 110 insertions(+), 13 deletions(-) diff --git a/addons/web/static/src/js/fields/relational_fields.js b/addons/web/static/src/js/fields/relational_fields.js index 437052d44e2..cf217cf70bc 100644 --- a/addons/web/static/src/js/fields/relational_fields.js +++ b/addons/web/static/src/js/fields/relational_fields.js @@ -1920,19 +1920,12 @@ var FormFieldMany2ManyTags = FieldMany2ManyTags.extend({ 'click .dropdown-toggle': '_onOpenColorPicker', 'mousedown .o_colorpicker a': '_onUpdateColor', 'mousedown .o_colorpicker .o_hide_in_kanban': '_onUpdateColor', - 'focusout .o_colorpicker': '_onCloseColorPicker', }), //-------------------------------------------------------------------------- // Handlers //-------------------------------------------------------------------------- - /** - * @private - */ - _onCloseColorPicker: function () { - this.$color_picker.remove(); - }, /** * @private * @param {MouseEvent} ev @@ -1978,7 +1971,7 @@ var FormFieldMany2ManyTags = FieldMany2ManyTags.extend({ $checkbox.prop('checked', !$checkbox.prop('checked')); // toggle checkbox this.prevColors = this.prevColors ? this.prevColors : {}; if ($checkbox.is(':checked')) { - this.prevColors[id] = currentColor + this.prevColors[id] = currentColor; } else { color = this.prevColors[id] ? this.prevColors[id] : 1; } diff --git a/addons/web/static/tests/fields/relational_fields_tests.js b/addons/web/static/tests/fields/relational_fields_tests.js index faf5c07417d..3a6423f9cdf 100644 --- a/addons/web/static/tests/fields/relational_fields_tests.js +++ b/addons/web/static/tests/fields/relational_fields_tests.js @@ -12028,11 +12028,12 @@ QUnit.module('relational_fields', { }); QUnit.test('fieldmany2many tags: update color', function (assert) { - assert.expect(3); + assert.expect(5); this.data.partner.records[0].timmy = [12, 14]; this.data.partner_type.records[0].color = 0; + var color; var form = createView({ View: FormView, model: 'partner', @@ -12040,6 +12041,13 @@ QUnit.module('relational_fields', { arch:'
' + '' + '', + mockRPC: function (route, args) { + if (args.method === 'write') { + assert.deepEqual(args.args[1], {color: color}, + "shoud write the new color"); + } + return this._super.apply(this, arguments); + }, res_id: 1, }); @@ -12048,17 +12056,20 @@ QUnit.module('relational_fields', { 'first tag color should be 0'); // Update the color in readonly + color = 1; form.$('.badge:first() .dropdown-toggle').click(); - $('.o_colorpicker a[data-color="1"]').trigger('mousedown'); // choose color 1 - assert.strictEqual(form.$('.badge:first()').data('color'), 1, + $('.o_colorpicker a[data-color="' + color + '"]').trigger('mousedown'); // choose color 1 + assert.strictEqual(form.$('.badge:first()').data('color'), color, 'should have correctly updated the color (in readonly)'); // Update the color in edit + color = 6; form.$buttons.find('.o_form_button_edit').click(); form.$('.badge:first() .dropdown-toggle').click(); - $('.o_colorpicker a[data-color="6"]').trigger('mousedown'); // choose color 6 - assert.strictEqual(form.$('.badge:first()').data('color'), 6, + $('.o_colorpicker a[data-color="' + color + '"]').trigger('mousedown'); // choose color 6 + assert.strictEqual(form.$('.badge:first()').data('color'), color, 'should have correctly updated the color (in edit)'); + form.destroy(); }); @@ -12250,6 +12261,99 @@ QUnit.module('relational_fields', { form.destroy(); }); + QUnit.test('widget many2many_tags: tags title attribute', function (assert) { + assert.expect(1); + this.data.turtle.records[0].partner_ids = [2]; + + var form = createView({ + View: FormView, + model: 'turtle', + data: this.data, + arch:'
' + + '' + + '' + + '' + + '' + + '
', + res_id: 1, + }); + + assert.deepEqual( + form.$('.o_field_many2manytags.o_field_widget .badge .o_badge_text').attr('title'), + 'second record', 'the title should be filled in' + ); + + form.destroy(); + }); + + QUnit.test('widget many2many_tags: toggle colorpicker multiple times', function (assert) { + assert.expect(11); + + this.data.partner.records[0].timmy = [12]; + this.data.partner_type.records[0].color = 0; + + var form = createView({ + View: FormView, + model: 'partner', + data: this.data, + arch:'
' + + '' + + '', + res_id: 1, + viewOptions: { + mode: 'edit', + }, + }); + + assert.strictEqual($('.o_field_many2manytags .badge').length, 1, + "should have one tag"); + assert.strictEqual($('.o_field_many2manytags .badge').data('color'), 0, + "tag should have color 0"); + assert.strictEqual($('.o_colorpicker:visible').length, 0, + "colorpicker should be closed"); + + // click on the badge to open colorpicker + form.$('.o_field_many2manytags .badge .dropdown-toggle').click(); + + assert.strictEqual($('.o_colorpicker:visible').length, 1, + "colorpicker should be open"); + + // click on the badge again to close colorpicker + form.$('.o_field_many2manytags .badge .dropdown-toggle').click(); + + assert.strictEqual($('.o_field_many2manytags .badge').data('color'), 0, + "tag should still have color 0"); + assert.strictEqual($('.o_colorpicker:visible').length, 0, + "colorpicker should be closed"); + + // click on the badge to open colorpicker + form.$('.o_field_many2manytags .badge .dropdown-toggle').click(); + + assert.strictEqual($('.o_colorpicker:visible').length, 1, + "colorpicker should be open"); + + // click on the colorpicker, but not on a color + form.$('.o_colorpicker').click(); + + assert.strictEqual($('.o_field_many2manytags .badge').data('color'), 0, + "tag should still have color 0"); + assert.strictEqual($('.o_colorpicker:visible').length, 0, + "colorpicker should be closed"); + + // click on the badge to open colorpicker + form.$('.o_field_many2manytags .badge .dropdown-toggle').click(); + + // click on a color in the colorpicker + form.$('.o_colorpicker .o_tag_color_2').trigger('mousedown'); + + assert.strictEqual($('.o_field_many2manytags .badge').data('color'), 2, + "tag should have color 2"); + assert.strictEqual($('.o_colorpicker:visible').length, 0, + "colorpicker should be closed"); + + form.destroy(); + }); + QUnit.module('FieldRadio'); QUnit.test('fieldradio widget on a many2one in a new record', function (assert) {