[FIX] BottomBarSheet: sheet name should update on foreign changes

How to reproduce:
On Firefox,
- double click the bottom bar to rename a sheet
- Undo the change (button or through Ctrl-Z)

=> the sheetName is not rolled back to its previous value

The issue seems to lie in the fact that in FF, setting a t-esc on an
Element that was previously `contenteditable=true` creates weird
behaviour. I suspect some internal state of the div that is not cleared.

On the other hand, changing the contenteditable state of the span
element might not be the best idea and one could consider that it's
safer to simply regenerate the span altogether when switching editing
state.

This commit takes the last suggested approach.

closes #7381

Task: 5016252
Signed-off-by: Pierre Rousseau (pro) <pro@odoo.com>

Author: rrahir

src/components/bottom_bar_sheet/bottom_bar_sheet.xml

@@ -6,6 +6,7 @@
         t-on-mousedown="(ev) => this.onMouseDown(ev)"
         t-on-contextmenu.prevent="(ev) => this.onContextMenu(ev)"
         t-ref="sheetDiv"
+        t-key="sheetName"
         t-att-style="props.style"
         t-att-title="sheetName"
         t-att-data-id="props.sheetId"

tests/bottom_bar/bottom_bar_component.test.ts

@@ -67,6 +67,10 @@ async function mountBottomBar(
   return { parent: parent as Parent, model, env };
 }
 
+function getSheetNameSpan(): HTMLSpanElement | null {
+  return fixture.querySelector<HTMLSpanElement>(".o-sheet-name");
+}
+
 describe("BottomBar component", () => {
   test("simple rendering", async () => {
     await mountBottomBar();
@@ -346,14 +350,13 @@ describe("BottomBar component", () => {
     test("Pasting styled content in sheet name and renaming sheet does not throw a trackback", async () => {
       const HTML = `<span style="color: rgb(242, 44, 61); background-color: rgb(0, 0, 0);">HELLO</span>`;
 
-      const sheetName = fixture.querySelector<HTMLElement>(".o-sheet-name")!;
+      const sheetName = getSheetNameSpan()!;
       triggerMouseEvent(sheetName, "dblclick");
       await nextTick();
 
       sheetName.innerHTML = HTML;
       await keyDown({ key: "Enter" });
-
-      expect(sheetName.getAttribute("contenteditable")).toEqual("false");
+      expect(getSheetNameSpan()!.getAttribute("contenteditable")).toEqual("false");
       await nextTick();
 
       expect(sheetName.innerText).toEqual("HELLO");
@@ -371,6 +374,21 @@ describe("BottomBar component", () => {
         expect(env.focusableElement.focus).toHaveBeenCalled();
       }
     );
+
+    test("Displayed sheet name is udpated on undo/redo", async () => {
+      const sheetName = getSheetNameSpan()!;
+      expect(sheetName.textContent).toEqual("Sheet1");
+      await doubleClick(sheetName);
+      sheetName.textContent = "ThisIsASheet";
+      await keyDown({ key: "Enter" });
+      expect(getSheetNameSpan()!.textContent).toEqual("ThisIsASheet");
+      undo(model);
+      await nextTick();
+      expect(getSheetNameSpan()!.textContent).toEqual("Sheet1");
+      redo(model);
+      await nextTick();
+      expect(getSheetNameSpan()!.textContent).toEqual("ThisIsASheet");
+    });
   });
 
   test("Can't rename a sheet in readonly mode", async () => {