[IMP] web: continue to edit lists when editable=top

Previous behavior
================

When `editable=bottom`, when we hit tab until the end of the line, the
user starts to create a new record.
But when `editable=top`, when hitting tab multiple until the end of the
line, the user starts to edit the first line that was existing before
instead of creating a new one.

New behavior
============

The behavior is consistent between both cases: the user can always
continue to edit lines one after the other.
The behavior for `editable=bottom` is not changed, but `editable=top`
continues to add lines on top one of each other.

linked to task-2879904

closes odoo/odoo#98603

Signed-off-by: Georis François (fge) <fge@odoo.com>
This commit is contained in:
william
2022-08-25 22:46:00 +02:00
committed by william-andre
parent 8d46e54c96
commit d92a8b5ffd
2 changed files with 34 additions and 1 deletions
@@ -1157,6 +1157,7 @@ export class ListRenderer extends Component {
const { activeActions, cycleOnTab, list } = this.props;
const row = cell.parentElement;
const applyMultiEditBehavior = record && record.selected && list.model.multiEdit;
const topReCreate = this.props.editable === 'top' && record.isNew;
if (
applyMultiEditBehavior &&
@@ -1176,7 +1177,8 @@ export class ListRenderer extends Component {
switch (hotkey) {
case "tab": {
const index = list.records.indexOf(record);
if (index === list.records.length - 1) {
const lastIndex = topReCreate ? 0 : list.records.length - 1;
if (index === lastIndex) {
if (this.displayRowCreates) {
if (record.isNew && !record.isDirty) {
list.unselectRecord(true);
@@ -1243,6 +1245,9 @@ export class ListRenderer extends Component {
case "enter": {
const index = list.records.indexOf(record);
let futureRecord = list.records[index + 1];
if (topReCreate && index === 0) {
futureRecord = null;
}
if (!futureRecord) {
if (activeActions && activeActions.create === false) {
@@ -13641,6 +13641,34 @@ QUnit.module("Views", (hooks) => {
assert.strictEqual(document.activeElement, intFieldInput);
});
QUnit.test("continue creating new lines in editable=top on keyboard nav", async function (assert) {
await makeView({
type: "list",
resModel: "foo",
serverData,
arch: `
<tree editable="top">
<field name="int_field"/>
</tree>`,
});
let initialRowCount = $('.o_data_cell[name=int_field]').length
// click on int_field cell of first row
await click(target, ".o_list_button_add");
await editInput(target, ".o_data_cell[name=int_field] input", "1");
triggerHotkey("Tab");
await nextTick();
await editInput(target, ".o_data_cell[name=int_field] input", "2");
triggerHotkey("Enter");
await nextTick();
// 3 new rows: the two created ("1" and "2", and a new still in edit mode)
assert.strictEqual($('.o_data_cell[name=int_field]').length , initialRowCount + 3);
});
QUnit.test("Date in evaluation context works with date field", async function (assert) {
patchDate(1997, 0, 9, 12, 0, 0);