♻️(react) update Pagination behavior

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

@@ -0,0 +1,5 @@
+---
+"@openfun/cunningham-react": minor
+---
+
+improve Pagination behavior

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>

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",