Debounce arrow up/down on BuilderNumberInput

Author: robinlej

addons/html_builder/static/src/core/building_blocks/builder_number_input.js

@@ -10,7 +10,9 @@ import {
     BuilderTextInputBase,
     textInputBasePassthroughProps,
 } from "@html_builder/core/building_blocks/builder_text_input_base";
+import { useChildRef } from "@web/core/utils/hooks";
 import { pick } from "@web/core/utils/objects";
+import { useDebounced } from "@web/core/utils/timing";
 
 export class BuilderNumberInput extends Component {
     static template = "html_builder.BuilderNumberInput";
@@ -46,6 +48,16 @@ export class BuilderNumberInput extends Component {
         this.commit = commit;
         this.preview = preview;
         this.state = state;
+
+        this.inputRef = useChildRef();
+        this.debouncedCommitValue = useDebounced(() => {
+            const normalizedDisplayValue = this.commit(this.inputRef.el.value);
+            this.inputRef.el.value = normalizedDisplayValue;
+        }, 550);
+        // ↑ 500 is the delay when holding keydown between the 1st and 2nd event
+        // fired. Some additional delay by the browser may add another ~5-10ms.
+        // We debounce above that threshold to keep a single history step when
+        // holding up/down on a number input.
     }
 
     /**
@@ -130,16 +142,10 @@ export class BuilderNumberInput extends Component {
         });
     }
 
-    onChange(e) {
-        const normalizedDisplayValue = this.commit(e.target.value);
-        e.target.value = normalizedDisplayValue;
-    }
-
     get displayValue() {
         return this.formatRawValue(this.state.value);
     }
 
-    // TODO: use this.preview or this.commit?
     onKeydown(e) {
         if (!["ArrowUp", "ArrowDown"].includes(e.key)) {
             return;
@@ -155,8 +161,8 @@ export class BuilderNumberInput extends Component {
             });
         }
         e.target.value = values.join(" ");
-        // OK because it only uses event.target.value.
-        this.onChange(e);
+        this.preview(e.target.value);
+        this.debouncedCommitValue();
     }
 
     get textInputBaseProps() {

addons/html_builder/static/src/core/building_blocks/builder_number_input.xml

@@ -5,6 +5,7 @@
     <BuilderComponent>
         <BuilderTextInputBase
             t-props="textInputBaseProps"
+            inputRef="inputRef"
             value="displayValue"
             inputClasses="props.inputClasses ? `text-end ${props.inputClasses}` : 'text-end'"
             commit="commit"

addons/html_builder/static/tests/custom_tab/builder_components/builder_number_input.test.js

@@ -385,6 +385,39 @@ describe("keyboard triggers", () => {
         expect("[data-action-id='customAction'] input").toHaveValue("-1");
         expect(":iframe .test-options-target").toHaveAttribute("data-number", "-1");
     });
+    test("apply preview on keydown and debounce commit operation", async () => {
+        addActionOption({
+            customAction: {
+                getValue: ({ editingElement }) => editingElement.innerHTML,
+                apply: ({ editingElement, value }) => {
+                    expect.step(`customAction ${value}`);
+                    editingElement.innerHTML = value;
+                },
+            },
+        });
+        addOption({
+            selector: ".test-options-target",
+            template: xml`<BuilderNumberInput action="'customAction'"/>`,
+        });
+        await setupWebsiteBuilder(`
+            <div class="test-options-target">10</div>
+        `);
+        await contains(":iframe .test-options-target").click();
+        await contains(".options-container input").focus();
+        // Simulate a single keydown hold down for a while.
+        await contains(".options-container input").keyDown("ArrowUp");
+        await advanceTime(500); // Default browser delay between 1st & 2nd keydown.
+        await contains(".options-container input").keyDown("ArrowUp");
+        await advanceTime();
+        await contains(".options-container input").keyDown("ArrowUp");
+        await advanceTime();
+        expect(":iframe .test-options-target").toHaveInnerHTML("13");
+        // 3 previews
+        expect.verifySteps(["customAction 11", "customAction 12", "customAction 13"]);
+        await advanceTime(560); // Debounce = 550
+        // 1 commit
+        expect.verifySteps(["customAction 13"]);
+    });
 });
 describe("unit & saveUnit", () => {
     test("should handle unit", async () => {