From 07a0a0f5bcc4f3e6f3b5e3ab9c5080da0c4b5bad Mon Sep 17 00:00:00 2001
From: Julien Mougenot <jum@odoo.com>
Date: Wed, 12 Aug 2020 10:31:20 +0000
Subject: [PATCH] [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  | 28 ++++++++++-------
 .../static/tests/components/pager_tests.js    | 31 +++++++++++++++++++
 2 files changed, 47 insertions(+), 12 deletions(-)

diff --git a/addons/web/static/src/js/components/pager.js b/addons/web/static/src/js/components/pager.js
index cada405ac7d..2d8d402afb1 100644
--- a/addons/web/static/src/js/components/pager.js
+++ b/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 });
         }
 
         //---------------------------------------------------------------------
diff --git a/addons/web/static/tests/components/pager_tests.js b/addons/web/static/tests/components/pager_tests.js
index 424bdde1eaa..61b7feed44e 100644
--- a/addons/web/static/tests/components/pager_tests.js
+++ b/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);