From f50378db3cd013ad5fcb67d52c5ce7577316bcd9 Mon Sep 17 00:00:00 2001
From: dhba <dhba@odoo.com>
Date: Wed, 8 Nov 2023 12:00:18 +0530
Subject: [PATCH] [FIX] web_editor: focus issue in banner

Before this commit:

- Inserting a banner did not set focus inside the banner; instead, focus
  was placed after the banner.

After this commit:

- Now, upon creating a banner, focus is now correctly set inside the
  banner.

task-3432167

X-original-commit: 7327d20626ec9164f47e00f7094a36b8794db5de
Part-of: odoo/odoo#151735
---
 .../js/editor/odoo-editor/src/OdooEditor.js   |  9 +++++++++
 .../static/src/js/wysiwyg/wysiwyg.js          |  3 ++-
 .../web_editor/static/tests/banner_tests.js   | 19 +++++++++++++++++++
 3 files changed, 30 insertions(+), 1 deletion(-)

diff --git a/addons/web_editor/static/src/js/editor/odoo-editor/src/OdooEditor.js b/addons/web_editor/static/src/js/editor/odoo-editor/src/OdooEditor.js
index d02e4bc94f9..ca88dc6303a 100644
--- a/addons/web_editor/static/src/js/editor/odoo-editor/src/OdooEditor.js
+++ b/addons/web_editor/static/src/js/editor/odoo-editor/src/OdooEditor.js
@@ -2116,6 +2116,15 @@ export class OdooEditor extends EventTarget {
         return didDeselectTable;
     }
 
+    /**
+     * `activateContenteditable` serves as an interface for external use,
+     * allowing users to conveniently trigger `_activateContenteditable`
+     * from outside the odooEditor.
+     */
+    activateContenteditable() {
+        this._activateContenteditable();
+    }
+
     //--------------------------------------------------------------------------
     // Private
     //--------------------------------------------------------------------------
diff --git a/addons/web_editor/static/src/js/wysiwyg/wysiwyg.js b/addons/web_editor/static/src/js/wysiwyg/wysiwyg.js
index 7cc8ccfeda9..88fb521e82e 100644
--- a/addons/web_editor/static/src/js/wysiwyg/wysiwyg.js
+++ b/addons/web_editor/static/src/js/wysiwyg/wysiwyg.js
@@ -2304,7 +2304,8 @@ export class Wysiwyg extends Component {
                     </div>
                 `).childNodes[0];
                 this.odooEditor.execCommand('insert', bannerElement);
-                setSelection(bannerElement.querySelector('.o_editor_banner > div'), 0);
+                this.odooEditor.activateContenteditable();
+                setSelection(bannerElement.querySelector('.o_editor_banner > div > p'), 0);
             },
         }
     }
diff --git a/addons/web_editor/static/tests/banner_tests.js b/addons/web_editor/static/tests/banner_tests.js
index 4559ad42e97..174eb7bc527 100644
--- a/addons/web_editor/static/tests/banner_tests.js
+++ b/addons/web_editor/static/tests/banner_tests.js
@@ -81,5 +81,24 @@ QUnit.module(
                     </div><p><br></p>`,
             );
         });
+        QUnit.test("should have focus inside banner when new banner is created", async function (assert) {
+            const { editor, editable } = onMount();
+            const node = editable.querySelector("p");
+            setSelection(node, 0);
+            insertText(editor, "Test");
+            setSelection(node.firstChild, 3, node.firstChild, 3);
+            insertText(editor, '/banner');
+            triggerEvent(editor.editable, "keydown", { key: "Enter" });
+            await nextTick();
+            assert.strictEqual(
+                editable.innerHTML,
+                `<p>Test</p><div class="o_editor_banner o_not_editable lh-1 d-flex align-items-center alert alert-info pb-0 pt-3" role="status" data-oe-protected="true" contenteditable="false">
+                        <i class="fs-4 fa fa-info-circle mb-3" aria-label="Banner Info"></i>
+                        <div class="w-100 ms-3" data-oe-protected="false" contenteditable="true">
+                            <p placeholder=\"Type &quot;/&quot; for commands\" class=\"oe-hint oe-command-temporary-hint\"><br></p>
+                        </div>
+                    </div><p><br></p>`,
+            );
+        });
     }
 );