[FW][FIX] BottomBarSheet: Rename a sheet with style content on Firefox

src/components/bottom_bar_sheet/bottom_bar_sheet.ts

@@ -161,13 +161,16 @@ export class BottomBarSheet extends Component<Props, SpreadsheetChildEnv> {
   }
 
   private stopEdition() {
-    if (!this.state.isEditing) return;
+    const input = this.sheetNameRef.el;
+    if (!this.state.isEditing || !input) return;
 
     this.state.isEditing = false;
     this.editionState = "initializing";
-    this.sheetNameRef.el?.blur();
+    input.blur();
 
     const inputValue = this.getInputContent() || "";
+    input.innerText = inputValue;
+
     interactiveRenameSheet(this.env, this.props.sheetId, inputValue, () => this.startEdition());
   }
 

src/components/bottom_bar_sheet/bottom_bar_sheet.xml

@@ -19,7 +19,7 @@
           t-on-dblclick="() => this.onDblClick()"
           t-on-focusout="() => this.onFocusOut()"
           t-on-keydown="(ev) => this.onKeyDown(ev)"
-          t-att-contenteditable="state.isEditing ? 'plaintext-only': 'false'"
+          t-att-contenteditable="state.isEditing ? 'true': 'false'"
         />
         <span class="o-sheet-icon ms-1" t-on-click.stop="(ev) => this.onIconClick(ev)">
           <t t-call="o-spreadsheet-Icon.TRIANGLE_DOWN"/>

tests/bottom_bar/bottom_bar_component.test.ts

@@ -253,7 +253,8 @@ describe("BottomBar component", () => {
       const sheetName = fixture.querySelector<HTMLElement>(".o-sheet-name")!;
       expect(sheetName.getAttribute("contenteditable")).toEqual("false");
       await doubleClick(sheetName);
-      expect(sheetName.getAttribute("contenteditable")).toEqual("plaintext-only");
+      await nextTick();
+      expect(sheetName.getAttribute("contenteditable")).toEqual("true");
       expect(document.activeElement).toEqual(sheetName);
     });
 
@@ -272,7 +273,7 @@ describe("BottomBar component", () => {
       await nextTick();
       await click(fixture, ".o-menu-item[data-name='rename'");
       const sheetName = fixture.querySelector<HTMLElement>(".o-sheet-name")!;
-      expect(sheetName.getAttribute("contenteditable")).toEqual("plaintext-only");
+      expect(sheetName.getAttribute("contenteditable")).toEqual("true");
       expect(document.activeElement).toEqual(sheetName);
     });
 
@@ -337,6 +338,22 @@ describe("BottomBar component", () => {
       expect(raiseError).not.toHaveBeenCalled();
       expect(sheetName.textContent).toEqual("SHEET1");
     });
+
+    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")!;
+      triggerMouseEvent(sheetName, "dblclick");
+      await nextTick();
+
+      sheetName.innerHTML = HTML;
+      await keyDown({ key: "Enter" });
+
+      expect(sheetName.getAttribute("contenteditable")).toEqual("false");
+      await nextTick();
+
+      expect(sheetName.innerText).toEqual("HELLO");
+    });
   });
 
   test("Can't rename a sheet in readonly mode", async () => {

tests/setup/jest.setup.ts

@@ -23,6 +23,15 @@ beforeAll(() => {
     (str, ...values) => str,
     () => true
   );
+  Object.defineProperty(Element.prototype, "innerText", {
+    get: function () {
+      return this.textContent;
+    },
+    set: function (value) {
+      this.textContent = value;
+      this.innerHTML = value;
+    },
+  });
 });
 
 beforeEach(() => {