[FIX] web: Disables pager on enter

Before this commit, the pager component would only quit the edit mode if
its value changed when hitting Enter.

Now, when pressing Enter while the pager value did not change, it will
leave the edit mode and trigger a "pager-changed" event regardless.

Task 2318738

closes odoo/odoo#59285

X-original-commit: a3197283d52bfda399ce45b7d5a52406885336d0
Signed-off-by: Aaron Bohy (aab) <aab@odoo.com>

addons/web/static/src/js/components/pager.js

@@ -42,15 +42,9 @@ odoo.define('web.Pager', function (require) {
             useAutofocus();
         }
 
-        async willUpdateProps(nextProps) {
+        async willUpdateProps() {
             this.state.editing = false;
-            if (
-                this.props.currentMinimum !== nextProps.currentMinimum ||
-                this.props.limit !== nextProps.limit ||
-                this.props.size !== nextProps.size
-            ) {
-                this.state.disabled = false;
-            }
+            this.state.disabled = false;
         }
 
         //---------------------------------------------------------------------
@@ -68,8 +62,7 @@ odoo.define('web.Pager', function (require) {
          * @returns {boolean} true iff there is only one page
          */
         get singlePage() {
-            const { currentMinimum, size } = this.props;
-            return (1 === currentMinimum) && (this.maximum === size);
+            return (1 === this.props.currentMinimum) && (this.maximum === this.props.size);
         }
 
         /**
@@ -141,8 +134,14 @@ odoo.define('web.Pager', function (require) {
         }
 
         /**
+         * Commits the current input value. There are two scenarios:
+         * - the value is the same: the pager toggles back to readonly
+         * - the value changed: the pager is disabled to prevent furtherchanges
+         * Either way the "pager-changed" event is triggered to reload the
+         * view.
          * @private
-         * @param {Object} payload
+         * @param {number} currentMinimum
+         * @param {number} limit
          */
         _updateAndDisable(currentMinimum, limit) {
             if (
@@ -150,8 +149,13 @@ odoo.define('web.Pager', function (require) {
                 limit !== this.props.limit
             ) {
                 this.state.disabled = true;
-                this.trigger('pager-changed', { currentMinimum, limit });
+            } else {
+                // In this case we want to trigger an update, but since it will
+                // not re-render the pager (current props === next props) we
+                // have to disable the edition manually here.
+                this.state.editing = false;
             }
+            this.trigger('pager-changed', { currentMinimum, limit });
         }
 
         //---------------------------------------------------------------------

addons/web/static/tests/components/pager_tests.js

@@ -72,6 +72,37 @@ odoo.define('web.pager_tests', function (require) {
             pager.destroy();
         });
 
+        QUnit.test("keydown on pager with same value", async function (assert) {
+            assert.expect(7);
+
+            const pager = await createComponent(Pager, {
+                props: {
+                    currentMinimum: 1,
+                    limit: 4,
+                    size: 10,
+                },
+                intercepts: {
+                    "pager-changed": () => assert.step("pager-changed"),
+                },
+            });
+
+            // Enter edit mode
+            await testUtils.dom.click(pager.el.querySelector('.o_pager_value'));
+
+            assert.containsOnce(pager, "input");
+            assert.strictEqual(cpHelpers.getPagerValue(pager), "1-4");
+            assert.verifySteps([]);
+
+            // Exit edit mode
+            await testUtils.dom.triggerEvent(pager.el.querySelector('input'), "keydown", { key: "Enter" });
+
+            assert.containsNone(pager, "input");
+            assert.strictEqual(cpHelpers.getPagerValue(pager), "1-4");
+            assert.verifySteps(["pager-changed"]);
+
+            pager.destroy();
+        });
+
         QUnit.test('pager value formatting', async function (assert) {
             assert.expect(8);