Sanitize BuilderNumberInput on input/change

Only accept: - numbers 0-9 - `.` and `,` - `-` for negative values - spaces to separate multiple values
odoo-dev · Mar 4, 2025 · f1f88bf · f1f88bf
1 parent 123da00
commit f1f88bf
Show file tree

Hide file tree

Showing 2 changed files with 58 additions and 0 deletions.
diff --git a/addons/html_builder/static/src/core/building_blocks/builder_number_input.js b/addons/html_builder/static/src/core/building_blocks/builder_number_input.js
@@ -69,7 +69,13 @@ export class BuilderNumberInput extends Component {
     }
 
     parseDisplayValue(displayValue) {
+        // Replace commas by dots and only accept 0-9, dot, - sign and space.
+        displayValue = displayValue.replace(/,/g, ".").replace(/[^0-9.-\s]/g, "");
+
         return this.convertSpaceSplitValues(displayValue, (value) => {
+            if (value === "") {
+                return value;
+            }
             const unit = this.props.unit;
             const saveUnit = this.props.saveUnit;
             if (unit && saveUnit) {

diff --git a/addons/html_builder/static/tests/custom_tab/builder_components/builder_number_input.test.js b/addons/html_builder/static/tests/custom_tab/builder_components/builder_number_input.test.js
@@ -482,3 +482,55 @@ test("trailing space in BuilderNumberInput is ignored", async () => {
     expect.verifySteps(["customAction 3 4 5", "customAction 3 4 5"]); // input, change
     expect(".options-container input").toHaveValue("3 4 5");
 });
+test("after input, displayed value is cleaned to match only numbers", async () => {
+    addOption({
+        selector: ".test-options-target",
+        template: xml`<BuilderNumberInput dataAttributeAction="'number'"/>`,
+    });
+    await setupWebsiteBuilder(`
+        <div class="test-options-target" data-number="10">Test</div>
+    `);
+    await contains(":iframe .test-options-target").click();
+    await contains(".options-container input").edit(" a&$*+>");
+    expect(".options-container input").toHaveValue("");
+    expect(":iframe .test-options-target").not.toHaveAttribute("data-number");
+});
+test("after copy / pasting, displayed value is cleaned to match only numbers", async () => {
+    addOption({
+        selector: ".test-options-target",
+        template: xml`<BuilderNumberInput dataAttributeAction="'number'"/>`,
+    });
+    await setupWebsiteBuilder(`
+        <div class="test-options-target" data-number="10">Test</div>
+    `);
+    await contains(":iframe .test-options-target").click();
+    await contains(".options-container input").edit(" a&$*-3+>", { instantly: true });
+    expect(".options-container input").toHaveValue("-3");
+    expect(":iframe .test-options-target").toHaveAttribute("data-number", "-3");
+});
+test("accept decimal numbers", async () => {
+    addOption({
+        selector: ".test-options-target",
+        template: xml`<BuilderNumberInput dataAttributeAction="'number'"/>`,
+    });
+    await setupWebsiteBuilder(`
+        <div class="test-options-target" data-number="10">Test</div>
+    `);
+    await contains(":iframe .test-options-target").click();
+    await contains(".options-container input").edit("3.3");
+    expect(".options-container input").toHaveValue("3.3");
+    expect(":iframe .test-options-target").toHaveAttribute("data-number", "3.3");
+});
+test("BuilderNumberInput transforms , into .", async () => {
+    addOption({
+        selector: ".test-options-target",
+        template: xml`<BuilderNumberInput dataAttributeAction="'number'"/>`,
+    });
+    await setupWebsiteBuilder(`
+        <div class="test-options-target" data-number="10">Test</div>
+    `);
+    await contains(":iframe .test-options-target").click();
+    await contains(".options-container input").edit("3,3");
+    expect(".options-container input").toHaveValue("3.3");
+    expect(":iframe .test-options-target").toHaveAttribute("data-number", "3.3");
+});