diff --git a/addons/web/static/tests/fields/relational_fields_tests.js b/addons/web/static/tests/fields/relational_fields_tests.js
index 072dd965d52..1a9576edd75 100644
--- a/addons/web/static/tests/fields/relational_fields_tests.js
+++ b/addons/web/static/tests/fields/relational_fields_tests.js
@@ -11251,6 +11251,219 @@ QUnit.module('relational_fields', {
form.destroy();
});
+
+ QUnit.module('TabNavigation');
+ QUnit.test('when Navigating to a many to one with tabs, it receives the focus on the add new line link', function (assert) {
+ assert.expect(3);
+
+ var form = createView({
+ View: FormView,
+ model: 'partner',
+ viewOptions: {
+ mode: 'edit',
+ },
+ data: this.data,
+ arch:'
',
+ res_id: 1,
+ });
+
+ assert.strictEqual(form.$el.find('input[name="qux"]')[0],
+ document.activeElement,
+ "initially, the focus should be on the 'qux' field because it is the first input");
+ form.$el.find('input[name="qux"]').trigger($.Event('keydown', {
+ which: $.ui.keyCode.TAB,
+ keyCode: $.ui.keyCode.TAB,
+ }));
+ assert.strictEqual(assert.strictEqual(form.$el.find('.o_field_x2many_list_row_add>a')[0],
+ document.activeElement,
+ "after tab, the focus should be on the many2one on the add new line"));
+
+ form.destroy();
+ });
+
+ QUnit.test('when Navigating to a many to one with tabs, it places the focus on the first visible field', function (assert) {
+ assert.expect(3);
+
+ var form = createView({
+ View: FormView,
+ model: 'partner',
+ viewOptions: {
+ mode: 'edit',
+ },
+ data: this.data,
+ arch:'
',
+ res_id: 1,
+ });
+
+ assert.strictEqual(form.$el.find('input[name="qux"]')[0],
+ document.activeElement,
+ "initially, the focus should be on the 'qux' field because it is the first input");
+ form.$el.find('input[name="qux"]').trigger($.Event('keydown', {
+ which: $.ui.keyCode.TAB,
+ keyCode: $.ui.keyCode.TAB,
+ }));
+ document.activeElement.click();
+ assert.strictEqual(assert.strictEqual(form.$el.find('input[name="turtle_foo"]')[0],
+ document.activeElement,
+ "after tab, the focus should be on the many2one"));
+
+ form.destroy();
+ });
+
+ QUnit.test('when Navigating to a many to one with tabs, not filling in the first field and hitting tab, we should not add a first line but navigate to the next control', function (assert) {
+ assert.expect(3);
+
+ this.data.partner.records[0].turtles = [];
+
+ var form = createView({
+ View: FormView,
+ model: 'partner',
+ viewOptions: {
+ mode: 'edit',
+ },
+ data: this.data,
+ arch:'
',
+ res_id: 1,
+ });
+
+ assert.strictEqual(form.$el.find('input[name="qux"]')[0],
+ document.activeElement,
+ "initially, the focus should be on the 'qux' field because it is the first input");
+ form.$el.find('input[name="qux"]').trigger($.Event('keydown', {
+ which: $.ui.keyCode.TAB,
+ keyCode: $.ui.keyCode.TAB,
+ }));
+
+ $(document.activeElement).trigger($.Event('keydown', {which: $.ui.keyCode.TAB}));
+
+ assert.strictEqual(assert.strictEqual(form.$el.find('input[name="foo"]')[0],
+ document.activeElement,
+ "after tab, the focus should be on the many2one"));
+
+ form.destroy();
+ });
+
+ QUnit.test('when Navigating to a many to one with tabs, editing in a popup, the popup should receive the focus then give it back', function (assert) {
+ assert.expect(4);
+
+ this.data.partner.records[0].turtles = [];
+
+ var form = createView({
+ View: FormView,
+ model: 'partner',
+ viewOptions: {
+ mode: 'edit',
+ },
+ data: this.data,
+ arch:'
',
+ res_id: 1,
+ archs: {
+ 'turtle,false,form': '
',
+ },
+ });
+
+ assert.strictEqual(form.$el.find('input[name="qux"]')[0],
+ document.activeElement,
+ "initially, the focus should be on the 'qux' field because it is the first input");
+ form.$el.find('input[name="qux"]').trigger($.Event('keydown', {
+ which: $.ui.keyCode.TAB,
+ keyCode: $.ui.keyCode.TAB,
+ }));
+
+ assert.strictEqual(form.$el.find('.o_field_x2many_list_row_add a')[0],
+ document.activeElement,
+ "after tab, the focus should be on the add new line link");
+
+ form.$el.find('.o_field_x2many_list_row_add a').trigger($.Event('keydown', {
+ which: $.ui.keyCode.ENTER,
+ keyCode: $.ui.keyCode.ENTER,
+ }));
+
+ assert.strictEqual($.find('input[name="turtle_foo"]')[0],
+ document.activeElement,
+ "after enter, the focus should be in the popup, in the first input field");
+
+ $('input[name="turtle_foo"]').trigger($.Event('keydown', {
+ which: $.ui.keyCode.ESCAPE,
+ keyCode: $.ui.keyCode.ESCAPE,
+ }));
+
+ assert.strictEqual(form.$el.find('.o_field_x2many_list_row_add a')[0],
+ document.activeElement,
+ "after escape, the focus should be back on the add new line link");
+
+ form.destroy();
+ });
+
});
});
});
diff --git a/addons/web/static/tests/views/form_tests.js b/addons/web/static/tests/views/form_tests.js
index 65b8ab5da38..6c192bff051 100644
--- a/addons/web/static/tests/views/form_tests.js
+++ b/addons/web/static/tests/views/form_tests.js
@@ -70,6 +70,12 @@ QUnit.module('Views', {
id: 4,
display_name: "aaa",
state: "ef",
+ }, {
+ id: 5,
+ display_name: "aaa",
+ foo:'',
+ bar:false,
+ state: "ef",
}],
onchanges: {},
},
@@ -6717,6 +6723,366 @@ QUnit.module('Views', {
});
+ QUnit.module('FormViewTABMainButtons');
+
+ QUnit.test('using tab in an empty required string field should not move to the next field',function(assert) {
+ assert.expect(3);
+
+ var form = createView({
+ View: FormView,
+ model: 'partner',
+ data: this.data,
+ arch:'
',
+ });
+
+ form.$('input[name=display_name]').click();
+ assert.strictEqual(form.$('input[name="display_name"]')[0], document.activeElement,
+ "display_name should be focused");
+ form.$('input[name="display_name"]').trigger($.Event('keydown', {which: $.ui.keyCode.TAB}));
+ assert.strictEqual(form.$('input[name="display_name"]')[0], document.activeElement,
+ "display_name should still be focused because it is empty and required");
+ assert.strictEqual(form.$('input[name="display_name"]').hasClass("o_field_invalid"), true,
+ "display_name should have the o_field_invalid class");
+ form.destroy();
+ });
+
+ QUnit.test('using tab in an empty required date field should not move to the next field',function(assert) {
+ assert.expect(2);
+
+ var form = createView({
+ View: FormView,
+ model: 'partner',
+ data: this.data,
+ arch:'
',
+ });
+
+ form.$('input[name=date]').click();
+ assert.strictEqual(form.$('input[name="date"]')[0], document.activeElement,
+ "display_name should be focused");
+ form.$('input[name="date"]').trigger($.Event('keydown', {which: $.ui.keyCode.TAB}));
+ assert.strictEqual(form.$('input[name="date"]')[0], document.activeElement,
+ "date should still be focused because it is empty and required");
+
+ form.destroy();
+ });
+
+ QUnit.test('Edit button get the focus when pressing TAB from form', function (assert) {
+ assert.expect(1);
+
+ var form = createView({
+ View: FormView,
+ model: 'partner',
+ data: this.data,
+ arch: '
',
+ res_id: 1,
+ });
+
+ // in edit
+ form.$buttons.find('.o_form_button_edit').click();
+ form.$('input[name="display_name"]').focus().trigger($.Event('keydown', {which: $.ui.keyCode.TAB}));
+ assert.strictEqual(form.$buttons.find('.btn-primary:visible')[0], document.activeElement,
+ "the first primary button (save) should be focused");
+ form.destroy();
+ });
+
+ QUnit.module('FormViewTABFormButtons');
+
+ QUnit.test('In Edition mode, after navigating to the last field, the default button when pressing TAB is SAVE', function (assert) {
+ assert.expect(1);
+ var form = createView({
+ View: FormView,
+ model: 'partner',
+ data: this.data,
+ arch: '
',
+ res_id: 2,
+ viewOptions: {
+ mode: 'edit',
+ },
+ });
+
+ form.$('input[name="display_name"]').focus().trigger($.Event('keydown', {which: $.ui.keyCode.TAB}));
+ assert.strictEqual(form.$buttons.find('.o_form_button_save:visible')[0], document.activeElement,
+ "the save should be focused");
+ form.destroy();
+ });
+
+ QUnit.test('In READ mode, the default button with focus is the first primary button of the form', function (assert) {
+ assert.expect(1);
+
+ var form = createView({
+ View: FormView,
+ model: 'partner',
+ data: this.data,
+ arch: '
',
+ res_id: 2,
+ });
+ assert.strictEqual(form.$('button.firstButton')[0], document.activeElement,
+ "by default the focus in edit mode should go to the first primary button of the form (not edit)");
+ form.destroy();
+ });
+
+ QUnit.test('In READ mode, the default button when pressing TAB is EDIT when there is no primary button on the form', function (assert) {
+ assert.expect(1);
+
+ var form = createView({
+ View: FormView,
+ model: 'partner',
+ data: this.data,
+ arch: '
',
+ res_id: 2,
+ //debug:1,
+ });
+ assert.strictEqual(form.$buttons.find('.o_form_button_edit')[0],document.activeElement,
+ "in read mode, when there are no primary buttons on the form, the default button with the focus should be edit");
+ form.destroy();
+ });
+
+ QUnit.test('In Edition mode, when an attribute is dynamically required (and not required), TAB should navigate to the next field', function (assert) {
+ assert.expect(1);
+
+ var form = createView({
+ View: FormView,
+ model: 'partner',
+ data: this.data,
+ arch: '
',
+ res_id: 5,
+ viewOptions: {
+ mode: 'edit',
+ },
+ });
+
+ form.$('input[name="foo"]').focus();
+ $(document.activeElement).trigger($.Event('keydown', {which: $.ui.keyCode.TAB}));
+
+ assert.strictEqual(form.$('div[name="bar"]>input')[0], document.activeElement, "foo is not required, so hitting TAB on foo should have moved the focus to BAR");
+ form.destroy();
+ });
+
+ QUnit.test('In Edition mode, when an attribute is dynamically required, TAB should stop on the field if it is required', function (assert) {
+ assert.expect(1);
+
+ var form = createView({
+ View: FormView,
+ model: 'partner',
+ data: this.data,
+ arch: '
',
+ res_id: 5,
+ viewOptions: {
+ mode: 'edit',
+ },
+ });
+
+ form.$('div[name="bar"]>input').click();
+ form.$('input[name="foo"]').focus();
+ $(document.activeElement).trigger($.Event('keydown', {which: $.ui.keyCode.TAB}));
+
+ assert.strictEqual(form.$('input[name="foo"]')[0], document.activeElement, "foo is required, so hitting TAB on foo should keep the focus on foo");
+ form.destroy();
+ });
+
+ QUnit.test('display tooltips for save and discard buttons', function (assert) {
+ assert.expect(1);
+
+ var form = createView({
+ View: FormView,
+ model: 'partner',
+ data: this.data,
+ arch: '
',
+ });
+
+ form.$buttons.find('.o_form_buttons_edit').tooltip('show',false);
+ assert.strictEqual($('.tooltip .oe_tooltip_string').length, 1,
+ "should have rendered a tooltip");
+ form.destroy();
+ });
+ QUnit.test('if the focus is on the save button, hitting ENTER should save', function (assert) {
+ assert.expect(1);
+
+ var form = createView({
+ View: FormView,
+ model: 'partner',
+ data: this.data,
+ arch: '
',
+ viewOptions: {
+ mode: 'edit',
+ },
+ mockRPC: function (route, args) {
+ if (args.method === 'create') {
+ assert.ok(true, "should call the /create route");
+ }
+ return this._super(route, args);
+ },
+ });
+
+ form.$buttons.find('.o_form_button_save')
+ .focus()
+ .trigger($.Event('keydown', {which: $.ui.keyCode.ENTER}));
+ form.destroy();
+ });
+ QUnit.test('if the focus is on the discard button, hitting ENTER should save', function (assert) {
+ assert.expect(1);
+
+ var form = createView({
+ View: FormView,
+ model: 'partner',
+ data: this.data,
+ arch: '
',
+ viewOptions: {
+ mode: 'edit',
+ },
+ mockRPC: function (route, args) {
+ if (args.method === 'create') {
+ assert.ok(true, "should call the /create route");
+ }
+ return this._super(route, args);
+ },
+ });
+
+ form.$buttons.find('.o_form_button_cancel')
+ .focus()
+ .trigger($.Event('keydown', {which: $.ui.keyCode.ENTER}));
+ form.destroy();
+ });
+ QUnit.test('if the focus is on the save button, hitting ESCAPE should discard', function (assert) {
+ assert.expect(1);
+
+ var form = createView({
+ View: FormView,
+ model: 'partner',
+ data: this.data,
+ arch: '
',
+ viewOptions: {
+ mode: 'edit',
+ },
+ mockRPC: function (route, args) {
+ if (args.method === 'default_get') {
+ assert.ok(true, "should call the /create route");
+ }
+ return this._super(route, args);
+ },
+ });
+
+ form.$buttons.find('.o_form_button_save')
+ .focus()
+ .trigger($.Event('keydown', {which: $.ui.keyCode.ESCAPE}));
+ form.destroy();
+ });
+ QUnit.test('if the focus is on the discard button, hitting ESCAPE should discard', function (assert) {
+ assert.expect(1);
+
+ var form = createView({
+ View: FormView,
+ model: 'partner',
+ data: this.data,
+ arch: '
',
+ viewOptions: {
+ mode: 'edit',
+ },
+ mockRPC: function (route, args) {
+ if (args.method === 'default_get') {
+ assert.ok(true, "should call the /create route");
+ }
+ return this._super(route, args);
+ },
+ });
+
+ form.$buttons.find('.o_form_button_cancel')
+ .focus()
+ .trigger($.Event('keydown', {which: $.ui.keyCode.ESCAPE}));
+ form.destroy();
+ });
+
+ QUnit.test('if the focus is on the save button, hitting TAB should not move to the next button', function (assert) {
+ assert.expect(1);
+ /*
+ this test has only one purpose: to say that it is normal that the focus stays within a button primary even after the TAB key has been pressed.
+ It is not possible here to execute the default action of the TAB on a button : https://stackoverflow.com/questions/32428993/why-doesnt-simulating-a-tab-keypress-move-focus-to-the-next-input-field
+ so writing a test that will always succeed is not useful.
+ */
+ assert.ok("Behavior can't be tested");
+ });
+
});
});
diff --git a/addons/web/static/tests/views/list_tests.js b/addons/web/static/tests/views/list_tests.js
index 167ff217722..d2753ca1d54 100644
--- a/addons/web/static/tests/views/list_tests.js
+++ b/addons/web/static/tests/views/list_tests.js
@@ -2400,11 +2400,14 @@ QUnit.module('Views', {
"third row should be in edition");
// Press 'Tab' -> should go to next line
+ // add a value in the cell because the Tab on an empty first cell would activate the next widget in the view
+ list.$('.o_selected_row input').val(11).trigger('input');
list.$('.o_selected_row input').trigger({type: 'keydown', which: 9});
assert.ok(list.$('.o_data_row:nth(3)').hasClass('o_selected_row'),
"fourth row should be in edition");
// Press 'Tab' -> should go back to first line as the create action isn't available
+ list.$('.o_selected_row input').val(11).trigger('input');
list.$('.o_selected_row input').trigger({type: 'keydown', which: 9});
assert.ok(list.$('.o_data_row:first').hasClass('o_selected_row'),
"first row should be in edition");
@@ -2471,7 +2474,7 @@ QUnit.module('Views', {
}
return this._super.apply(this, arguments);
},
- fieldDebounce: 1,
+ fieldDebounce: 1
});
// click on first td and press TAB
diff --git a/addons/web_editor/static/src/js/backend/fields.js b/addons/web_editor/static/src/js/backend/fields.js
index d3d601bac73..bbb43fc2f82 100644
--- a/addons/web_editor/static/src/js/backend/fields.js
+++ b/addons/web_editor/static/src/js/backend/fields.js
@@ -62,6 +62,12 @@ var FieldTextHtmlSimple = basic_fields.DebouncedField.extend(TranslatableFieldMi
isSet: function () {
return this.value && this.value !== "
" && this.value.match(/\S/);
},
+ /**
+ * @override
+ */
+ getFocusableElement: function () {
+ return this.$content || this._super.apply(this, arguments);
+ },
/**
* Do not re-render this field if it was the origin of the onchange call.
*
diff --git a/odoo/addons/test_main_flows/static/src/js/tour.js b/odoo/addons/test_main_flows/static/src/js/tour.js
index 48417b619f1..20037b20171 100644
--- a/odoo/addons/test_main_flows/static/src/js/tour.js
+++ b/odoo/addons/test_main_flows/static/src/js/tour.js
@@ -143,19 +143,22 @@ tour.register('main_flow_tour', {
trigger: ".modal-footer .btn-primary",
content: _t('Save'),
position: 'bottom',
-}, {
+},
+ {
// Add second component
trigger: ".o_field_x2many_list_row_add > a",
- extra_trigger: "body:not(.modal-open)",
+ extra_trigger: "body:not(:has(table.o_list_view div.o_field_widget[name='product_id'] input))",
content: _t("Click here to add some lines."),
position: "bottom",
-}, {
+},
+{
trigger: ".o_selected_row .o_required_modifier[name=product_id] input",
extra_trigger: '.o_field_widget[name=bom_line_ids] .o_data_row:nth(1).o_selected_row',
content: _t("Select a product, or create a new one on the fly."),
position: "right",
run: "text the_flow.component2",
-}, {
+},
+{
trigger: ".ui-menu-item > a:contains('the_flow.component2')",
auto: true,
}, {
@@ -364,11 +367,11 @@ tour.register('main_flow_tour', {
content: _t("Enter an email address"),
position: "right",
run: "text test@the_flow.com",
-}, {
+},{
trigger: ".modal-footer .btn-primary",
content: _t("Save your changes"),
position: "bottom",
-}, {
+}, {
trigger: ".modal-footer .btn-primary span:contains('Send')",
content: _t("Try to send it to email"),
position: "bottom",