[FIX] pivot: error on removing max number of columns/rows

src/components/side_panel/pivot/pivot_side_panel/pivot_design_panel/pivot_design_panel.ts

@@ -3,6 +3,7 @@ import { SpreadsheetChildEnv } from "@odoo/o-spreadsheet-engine/types/spreadshee
 import { Component } from "@odoo/owl";
 import { Store, useLocalStore } from "../../../../../store_engine";
 import { PivotStyle, UID } from "../../../../../types";
+import { NumberInput } from "../../../../number_input/number_input";
 import { Checkbox } from "../../../components/checkbox/checkbox";
 import { Section } from "../../../components/section/section";
 import { PivotSidePanelStore } from "../pivot_side_panel_store";
@@ -14,14 +15,19 @@ interface Props {
 export class PivotDesignPanel extends Component<Props, SpreadsheetChildEnv> {
   static template = "o-spreadsheet-PivotDesignPanel";
   static props = { pivotId: String };
-  static components = { Section, Checkbox };
+  static components = { Section, Checkbox, NumberInput };
 
   store!: Store<PivotSidePanelStore>;
 
   setup() {
     this.store = useLocalStore(PivotSidePanelStore, this.props.pivotId, "neverDefer");
   }
 
+  updatePivotStyleNumberProperty(valueStr: string, key: keyof PivotStyle) {
+    const value = parseInt(valueStr);
+    this.store.update({ style: { ...this.pivotStyle, [key]: isNaN(value) ? undefined : value } });
+  }
+
   updatePivotStyleProperty(key: keyof PivotStyle, value: PivotStyle[keyof PivotStyle]) {
     this.store.update({ style: { ...this.pivotStyle, [key]: value } });
   }

src/components/side_panel/pivot/pivot_side_panel/pivot_design_panel/pivot_design_panel.xml

@@ -6,24 +6,22 @@
           <div class="row mb-2 align-items-center">
             <div class="col-6">Max rows:</div>
             <div class="col-6 d-flex align-items-center">
-              <input
-                t-att-value="pivotStyle.numberOfRows ?? ''"
-                type="number"
-                class="o-pivot-n-of-rows o-input"
-                placeholder="e.g. 10"
-                t-on-change="(ev) => this.updatePivotStyleProperty('numberOfRows', ev.target.valueAsNumber)"
+              <NumberInput
+                value="pivotStyle.numberOfRows ?? ''"
+                class="'o-pivot-n-of-rows'"
+                placeholder.translate="e.g. 10"
+                onChange="(value) => this.updatePivotStyleNumberProperty(value, 'numberOfRows')"
               />
             </div>
           </div>
           <div class="row mb-2 align-items-center">
             <div class="col-6">Max columns:</div>
             <div class="col-6 d-flex align-items-center">
-              <input
-                t-att-value="pivotStyle.numberOfColumns ?? ''"
-                type="number"
-                class="o-pivot-n-of-columns o-input"
-                placeholder="e.g. 5"
-                t-on-change="(ev) => this.updatePivotStyleProperty('numberOfColumns', ev.target.valueAsNumber)"
+              <NumberInput
+                value="pivotStyle.numberOfColumns ?? ''"
+                class="'o-pivot-n-of-columns'"
+                placeholder.translate="e.g. 5"
+                onChange="(value) => this.updatePivotStyleNumberProperty(value, 'numberOfColumns')"
               />
             </div>
           </div>

tests/pivots/pivot_design_side_panel.test.ts

@@ -94,4 +94,20 @@ describe("Spreadsheet pivot side panel", () => {
     await setInputValueAndTrigger("input.o-pivot-n-of-rows", "12");
     expect(model.getters.getPivotCoreDefinition("1").style?.numberOfRows).toBe(12);
   });
+
+  test("Editing a number input with a non-number value make the property undefined and not NaN", async () => {
+    updatePivot(model, "1", { style: { numberOfRows: 5, numberOfColumns: 10 } });
+    await nextTick();
+
+    jest.useFakeTimers();
+    setInputValueAndTrigger("input.o-pivot-n-of-rows", "olà");
+    setInputValueAndTrigger("input.o-pivot-n-of-columns", "");
+    jest.advanceTimersByTime(1000);
+
+    expect(model.getters.getPivotCoreDefinition("1").style).toEqual({
+      numberOfRows: undefined,
+      numberOfColumns: undefined,
+    });
+    jest.useRealTimers();
+  });
 });