pengyuthon/odoo_source
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[FIX] web: restore broken datepicker input behavior

Browse Source 
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
This commit is contained in:
Martin Geubelle
2018-10-11 08:41:48 +00:00
parent 12a795a7a0
commit f249c5ef2a
3 changed files with 11 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/web/static/src/js/widgets/date_picker.js
-6
View File
@@ -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);
},
/**
addons/web/static/tests/fields/basic_fields_tests.js
+7 -12
View File
@@ -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'),
addons/web/static/tests/views/calendar_tests.js
+4 -4
View File
@@ -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');