From f249c5ef2a3242952e4c13b0ebca2e72f40ae064 Mon Sep 17 00:00:00 2001 From: Martin Geubelle Date: Wed, 10 Oct 2018 11:29:49 +0000 Subject: [PATCH] [FIX] web: restore broken datepicker input behavior In Firefox, the input behavior and visual representation (navigation, caret placement, value selection, etc.) was broken when using a datepicker (easily reproductible on date and datetime widgets). This was due to the `focus` event being stopped on the input, which doesn't seem to be correctly supported by Firefox. The deleted code was supposed to toggle the picker when the field was clicked (see odoo/odoo@89093a1) (toggle on click and disable focus) but the lib correctly supports on focus without extra code. This also fixes the fact that the datepicker was not open on focus (only on clicked). In some tests where the field was the first in the form view, it is now correctly autofocused. Forward-port: not useful from 12.0 because the code has changed with BS4 and this has already been applied in odoo/odoo@6692919 and odoo/odoo@c63630d. Closes #23438 closes odoo/odoo#27657 --- .../web/static/src/js/widgets/date_picker.js | 6 ------ .../static/tests/fields/basic_fields_tests.js | 19 +++++++------------ .../web/static/tests/views/calendar_tests.js | 8 ++++---- 3 files changed, 11 insertions(+), 22 deletions(-) diff --git a/addons/web/static/src/js/widgets/date_picker.js b/addons/web/static/src/js/widgets/date_picker.js index 8f87b36c874..d3f4d134229 100644 --- a/addons/web/static/src/js/widgets/date_picker.js +++ b/addons/web/static/src/js/widgets/date_picker.js @@ -22,8 +22,6 @@ var DateWidget = Widget.extend({ init: function(parent, options) { this._super.apply(this, arguments); - var l10n = _t.database.parameters; - this.name = parent.name; this.options = _.defaults(options || {}, { format : this.type_of_date === 'datetime' ? time.getLangDatetimeFormat() : time.getLangDateFormat(), @@ -51,12 +49,8 @@ var DateWidget = Widget.extend({ */ start: function() { this.$input = this.$('input.o_datepicker_input'); - this.$input.focus(function(e) { - e.stopImmediatePropagation(); - }); this.$input.datetimepicker(this.options); this.picker = this.$input.data('DateTimePicker'); - this.$input.click(this.picker.toggle.bind(this.picker)); this._setReadonly(false); }, /** diff --git a/addons/web/static/tests/fields/basic_fields_tests.js b/addons/web/static/tests/fields/basic_fields_tests.js index eab68f08207..df16f5b393f 100644 --- a/addons/web/static/tests/fields/basic_fields_tests.js +++ b/addons/web/static/tests/fields/basic_fields_tests.js @@ -2045,7 +2045,7 @@ QUnit.module('basic_fields', { }); QUnit.test('date field value should not set on first click', function (assert) { - assert.expect(2); + assert.expect(3); var form = createView({ View: FormView, @@ -2055,10 +2055,10 @@ QUnit.module('basic_fields', { res_id: 4, }); form.$buttons.find('.o_form_button_edit').click(); - form.$('.o_datepicker_input').click(); + assert.strictEqual($('.bootstrap-datetimepicker-widget').length, 1, "there should be a datepicker (autofocus)"); assert.strictEqual(form.$('.o_datepicker_input').val(), '', "date field's input should be empty on first click"); $('.day:contains(22)').click(); - form.$('.o_datepicker_input').click(); // Open Datepicker second time + form.$('.o_datepicker_input').focus(); // Open Datepicker second time assert.strictEqual($('.day.active').text(), '22', 'datepicker should be highlight with 22nd day of month'); form.destroy(); }); @@ -2096,8 +2096,7 @@ QUnit.module('basic_fields', { assert.strictEqual(form.$('.o_datepicker_input').val(), '02/03/2017', 'the date should be correct in edit mode'); - // click on the input and select another value - form.$('.o_datepicker_input').click(); + // select another value assert.ok($('.bootstrap-datetimepicker-widget').length, 'datepicker should be open'); assert.strictEqual($('.day.active').data('day'), '02/03/2017', 'datepicker should be highlight February 3'); $('.bootstrap-datetimepicker-widget .picker-switch').first().click(); // Month selection @@ -2180,8 +2179,7 @@ QUnit.module('basic_fields', { assert.strictEqual(list.$('input.o_datepicker_input').val(), '02/03/2017', 'the date should be correct in edit mode'); - // click on the input and select another value - list.$('input.o_datepicker_input').click(); + // select another value assert.ok($('.bootstrap-datetimepicker-widget').length, 'datepicker should be open'); $('.bootstrap-datetimepicker-widget .picker-switch').first().click(); // Month selection $('.bootstrap-datetimepicker-widget .picker-switch').first().click(); // Year selection @@ -2298,8 +2296,7 @@ QUnit.module('basic_fields', { form.$buttons.find('.o_form_button_edit').click(); assert.strictEqual(form.$('.o_datepicker_input').val(), expectedDateString, 'the datetime should be correct in edit mode'); - // click on the input and select 22 February at 8:23:33 - form.$('.o_datepicker_input').click(); + // select 22 February at 8:23:33 assert.ok($('.bootstrap-datetimepicker-widget').length, 'datepicker should be open'); $('.bootstrap-datetimepicker-widget .picker-switch').first().click(); // Month selection $('.bootstrap-datetimepicker-widget .picker-switch').first().click(); // Year selection @@ -2397,8 +2394,7 @@ QUnit.module('basic_fields', { assert.strictEqual(list.$('input.o_datepicker_input').val(), expectedDateString, 'the date should be correct in edit mode'); - // click on the input and select 22 February at 8:23:33 - list.$('input.o_datepicker_input').click(); + // select 22 February at 8:23:33 assert.ok($('.bootstrap-datetimepicker-widget').length, 'datepicker should be open'); $('.bootstrap-datetimepicker-widget .picker-switch').first().click(); // Month selection $('.bootstrap-datetimepicker-widget .picker-switch').first().click(); // Year selection @@ -2574,7 +2570,6 @@ QUnit.module('basic_fields', { }); form.$buttons.find('.o_form_button_create').click(); - form.$('.o_datepicker_input.o_input').click(); assert.ok($('.day:last-child(),.day:nth-child(2)').hasClass('disabled'), 'first and last days must be disabled'); assert.notOk($('.day:not(:last-child()):not(:nth-child(2))').hasClass('disabled'), diff --git a/addons/web/static/tests/views/calendar_tests.js b/addons/web/static/tests/views/calendar_tests.js index 6cab1053be5..00cdfa24dd2 100644 --- a/addons/web/static/tests/views/calendar_tests.js +++ b/addons/web/static/tests/views/calendar_tests.js @@ -621,14 +621,14 @@ QUnit.module('Views', { "should display the datetime from the date with the timezone"); // use datepicker to enter a date: 12/13/2016 08:00:00 - $('.o_field_widget[name="start"] input').trigger('click'); + $('.o_field_widget[name="start"] input').trigger('focus'); $('.bootstrap-datetimepicker-widget .picker-switch a[data-action="togglePicker"]').trigger('click'); $('.bootstrap-datetimepicker-widget .timepicker .timepicker-hour').trigger('click'); $('.bootstrap-datetimepicker-widget .timepicker-hours td.hour:contains(08)').trigger('click'); $('.bootstrap-datetimepicker-widget .picker-switch a[data-action="close"]').trigger('click'); // use datepicker to enter a date: 12/13/2016 10:00:00 - $('.o_field_widget[name="stop"] input').trigger('click'); + $('.o_field_widget[name="stop"] input').trigger('focus'); $('.bootstrap-datetimepicker-widget .picker-switch a[data-action="togglePicker"]').trigger('click'); $('.bootstrap-datetimepicker-widget .timepicker .timepicker-hour').trigger('click'); $('.bootstrap-datetimepicker-widget .timepicker-hours td.hour:contains(10)').trigger('click'); @@ -870,14 +870,14 @@ QUnit.module('Views', { "should display the datetime from the date with the timezone"); // use datepicker to enter a date: 12/13/2016 08:00:00 - $('.o_field_widget[name="start"] input').trigger('click'); + $('.o_field_widget[name="start"] input').trigger('focus'); $('.bootstrap-datetimepicker-widget .picker-switch a[data-action="togglePicker"]').trigger('click'); $('.bootstrap-datetimepicker-widget .timepicker .timepicker-hour').trigger('click'); $('.bootstrap-datetimepicker-widget .timepicker-hours td.hour:contains(08)').trigger('click'); $('.bootstrap-datetimepicker-widget .picker-switch a[data-action="close"]').trigger('click'); // use datepicker to enter a date: 12/13/2016 10:00:00 - $('.o_field_widget[name="stop"] input').trigger('click'); + $('.o_field_widget[name="stop"] input').trigger('focus'); $('.bootstrap-datetimepicker-widget .picker-switch a[data-action="togglePicker"]').trigger('click'); $('.bootstrap-datetimepicker-widget .timepicker .timepicker-hour').trigger('click'); $('.bootstrap-datetimepicker-widget .timepicker-hours td.hour:contains(10)').trigger('click');