From 7da2b1f2a803e24ed51bc1c82b304914586e69b8 Mon Sep 17 00:00:00 2001
From: Antoine Guenet <age@odoo.com>
Date: Tue, 24 May 2022 13:31:21 +0000
Subject: [PATCH] [FIX] web_editor: properly size new rows added with TAB

New rows added with TAB in a table were missing a <br> in each cell,
making them appear less tall.

task-2858455

Part-of: odoo/odoo#92200
---
 .../js/editor/odoo-editor/src/commands/commands.js   |  6 +++++-
 .../js/editor/odoo-editor/test/spec/editor.test.js   | 12 ++++++++++++
 2 files changed, 17 insertions(+), 1 deletion(-)

diff --git a/addons/web_editor/static/src/js/editor/odoo-editor/src/commands/commands.js b/addons/web_editor/static/src/js/editor/odoo-editor/src/commands/commands.js
index 2261e4bc1cf..b27038fdcf1 100644
--- a/addons/web_editor/static/src/js/editor/odoo-editor/src/commands/commands.js
+++ b/addons/web_editor/static/src/js/editor/odoo-editor/src/commands/commands.js
@@ -536,7 +536,11 @@ function addRow(editor, beforeOrAfter) {
     if (!row) return;
     const newRow = document.createElement('tr');
     const cells = row.querySelectorAll('td');
-    newRow.append(...Array.from(Array(cells.length)).map(() => document.createElement('td')));
+    newRow.append(...Array.from(Array(cells.length)).map(() => {
+        const td = document.createElement('td');
+        td.append(document.createElement('br'));
+        return td;
+    }));
     row[beforeOrAfter](newRow);
 }
 function deleteTable(editor, table) {
diff --git a/addons/web_editor/static/src/js/editor/odoo-editor/test/spec/editor.test.js b/addons/web_editor/static/src/js/editor/odoo-editor/test/spec/editor.test.js
index 8566470d559..85c329b10ac 100644
--- a/addons/web_editor/static/src/js/editor/odoo-editor/test/spec/editor.test.js
+++ b/addons/web_editor/static/src/js/editor/odoo-editor/test/spec/editor.test.js
@@ -3882,6 +3882,18 @@ X[]
         });
     });
 
+    describe('tables', () => {
+        describe('tab', () => {
+            it('should add a new row on press tab at the end of a table', async () => {
+                await testEditor(BasicEditor, {
+                    contentBefore: '<table><tbody><tr><td>ab</td><td>cd</td><td>ef[]</td></tr></tbody></table>',
+                    stepFunction: async editor => triggerEvent(editor.editable, 'keydown', { key: 'Tab'}),
+                    contentAfter: '<table><tbody><tr><td>ab</td><td>cd</td><td>ef</td></tr><tr><td>[]<br></td><td><br></td><td><br></td></tr></tbody></table>',
+                });
+            });
+        });
+    });
+
     // Note that arrow keys test have a contentAfter that is not reflective of
     // reality. The browser doesn't apply the selection change after triggering
     // an event programmatically so what we are testing here is that if a custom