From 09e474c8c14d693e934aef54e69958d354ca2e88 Mon Sep 17 00:00:00 2001
From: Nathan Vasse <nathan.vasse@gmail.com>
Date: Mon, 4 Sep 2023 15:42:02 +0200
Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F(react)=20update=20Pagination?=
 =?UTF-8?q?=20behavior?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

We want to make the Pagination more intuitive and fluent. Now it displays
the current page all the time, auto select, auto submits on blur.
---
 .changeset/poor-dragons-dress.md                   |  5 +++++
 packages/react/src/components/Pagination/index.tsx | 11 ++++++++---
 packages/react/src/locales/en-US.json              |  2 +-
 3 files changed, 14 insertions(+), 4 deletions(-)
 create mode 100644 .changeset/poor-dragons-dress.md

diff --git a/.changeset/poor-dragons-dress.md b/.changeset/poor-dragons-dress.md
new file mode 100644
index 0000000..39afdb7
--- /dev/null
+++ b/.changeset/poor-dragons-dress.md
@@ -0,0 +1,5 @@
+---
+"@openfun/cunningham-react": minor
+---
+
+improve Pagination behavior
diff --git a/packages/react/src/components/Pagination/index.tsx b/packages/react/src/components/Pagination/index.tsx
index 4f73e05..0db2e05 100644
--- a/packages/react/src/components/Pagination/index.tsx
+++ b/packages/react/src/components/Pagination/index.tsx
@@ -1,4 +1,4 @@
-import React, { Fragment, useState } from "react";
+import React, { Fragment, useEffect, useState } from "react";
 import { Button } from ":/components/Button";
 import { Input } from ":/components/Forms/Input";
 import { useCunningham } from ":/components/Provider";
@@ -47,6 +47,10 @@ export const Pagination = ({
   const { t } = useCunningham();
   const [gotoValue, setGotoValue] = useState("");
 
+  useEffect(() => {
+    setGotoValue(page + "");
+  }, [page]);
+
   if (pagesCount <= 1) {
     return null;
   }
@@ -83,14 +87,13 @@ export const Pagination = ({
 
   const gotoPage = () => {
     let value = +gotoValue;
-    if (value < 0) {
+    if (value < 0 || !value) {
       value = 1;
     }
     if (value > pagesCount) {
       value = pagesCount;
     }
     onPageChange(value);
-    setGotoValue("");
   };
 
   const canPrevious = page > 1;
@@ -161,6 +164,8 @@ export const Pagination = ({
             onChange={(e) => setGotoValue(e.target.value)}
             min={1}
             max={pagesCount}
+            onBlur={() => gotoPage()}
+            onFocus={(e) => e.target.select()}
           />
         </form>
       </div>
diff --git a/packages/react/src/locales/en-US.json b/packages/react/src/locales/en-US.json
index c9291d2..7e04503 100644
--- a/packages/react/src/locales/en-US.json
+++ b/packages/react/src/locales/en-US.json
@@ -1,7 +1,7 @@
 {
   "components": {
     "pagination": {
-      "goto_label": "Go to",
+      "goto_label": "Go to page",
       "goto_label_aria": "Go to any page",
       "next_aria": "Go to next page",
       "previous_aria": "Go to previous page",