fix: pagination clicking page triggers form submit

When used in a form, the pagination triggers a form submit. Changed pagination links to be buttons with type button instead of the default submit. Closes #702
42BV · Jan 16, 2024 · 58ec44a · 58ec44a
1 parent daca395
commit 58ec44a
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 3 deletions.
diff --git a/src/core/Pagination/Pagination.tsx b/src/core/Pagination/Pagination.tsx
@@ -121,19 +121,23 @@ export function Pagination<T>({
         {content.map((item, index) => (
           <PaginationItem active={item === current} key={index}>
             {item === '...' ? (
-              <PaginationLink className="disabled" disabled={true}>
+              <PaginationLink
+                className="disabled"
+                disabled={true}
+                type="button"
+              >
                 {item}
               </PaginationLink>
             ) : (
-              <PaginationLink onClick={() => onChange(item)}>
+              <PaginationLink onClick={() => onChange(item)} type="button">
                 {item}
               </PaginationLink>
             )}
           </PaginationItem>
         ))}
         {showPreviousAndNextButtons ? (
           <PaginationItem disabled={last}>
-            <PaginationLink onClick={() => onChange(current + 1)}>
+            <PaginationLink onClick={() => onChange(current + 1)} type="button">
               <Icon icon="arrow_forward" size={14} />
             </PaginationLink>
           </PaginationItem>

diff --git a/src/core/Pagination/__snapshots__/Pagination.test.tsx.snap b/src/core/Pagination/__snapshots__/Pagination.test.tsx.snap
@@ -31,6 +31,7 @@ exports[`Component: Pagination ui first page 1`] = `
         >
           <button
             class="page-link"
+            type="button"
           >
             1
           </button>
@@ -40,6 +41,7 @@ exports[`Component: Pagination ui first page 1`] = `
         >
           <button
             class="page-link"
+            type="button"
           >
             2
           </button>
@@ -49,6 +51,7 @@ exports[`Component: Pagination ui first page 1`] = `
         >
           <button
             class="page-link"
+            type="button"
           >
             3
           </button>
@@ -59,6 +62,7 @@ exports[`Component: Pagination ui first page 1`] = `
           <button
             class="disabled page-link"
             disabled=""
+            type="button"
           >
             ...
           </button>
@@ -68,6 +72,7 @@ exports[`Component: Pagination ui first page 1`] = `
         >
           <button
             class="page-link"
+            type="button"
           >
             8
           </button>
@@ -77,6 +82,7 @@ exports[`Component: Pagination ui first page 1`] = `
         >
           <button
             class="page-link"
+            type="button"
           >
             9
           </button>
@@ -86,6 +92,7 @@ exports[`Component: Pagination ui first page 1`] = `
         >
           <button
             class="page-link"
+            type="button"
           >
             10
           </button>
@@ -95,6 +102,7 @@ exports[`Component: Pagination ui first page 1`] = `
         >
           <button
             class="page-link"
+            type="button"
           >
             <i
               class="icon material-icons"
@@ -146,6 +154,7 @@ exports[`Component: Pagination ui last page 1`] = `
         >
           <button
             class="page-link"
+            type="button"
           >
             1
           </button>
@@ -155,6 +164,7 @@ exports[`Component: Pagination ui last page 1`] = `
         >
           <button
             class="page-link"
+            type="button"
           >
             2
           </button>
@@ -164,6 +174,7 @@ exports[`Component: Pagination ui last page 1`] = `
         >
           <button
             class="page-link"
+            type="button"
           >
             3
           </button>
@@ -174,6 +185,7 @@ exports[`Component: Pagination ui last page 1`] = `
           <button
             class="disabled page-link"
             disabled=""
+            type="button"
           >
             ...
           </button>
@@ -183,6 +195,7 @@ exports[`Component: Pagination ui last page 1`] = `
         >
           <button
             class="page-link"
+            type="button"
           >
             8
           </button>
@@ -192,6 +205,7 @@ exports[`Component: Pagination ui last page 1`] = `
         >
           <button
             class="page-link"
+            type="button"
           >
             9
           </button>
@@ -201,6 +215,7 @@ exports[`Component: Pagination ui last page 1`] = `
         >
           <button
             class="page-link"
+            type="button"
           >
             10
           </button>
@@ -210,6 +225,7 @@ exports[`Component: Pagination ui last page 1`] = `
         >
           <button
             class="page-link"
+            type="button"
           >
             <i
               class="icon material-icons"
@@ -261,6 +277,7 @@ exports[`Component: Pagination ui middle 1`] = `
         >
           <button
             class="page-link"
+            type="button"
           >
             1
           </button>
@@ -271,6 +288,7 @@ exports[`Component: Pagination ui middle 1`] = `
           <button
             class="disabled page-link"
             disabled=""
+            type="button"
           >
             ...
           </button>
@@ -280,6 +298,7 @@ exports[`Component: Pagination ui middle 1`] = `
         >
           <button
             class="page-link"
+            type="button"
           >
             4
           </button>
@@ -289,6 +308,7 @@ exports[`Component: Pagination ui middle 1`] = `
         >
           <button
             class="page-link"
+            type="button"
           >
             5
           </button>
@@ -298,6 +318,7 @@ exports[`Component: Pagination ui middle 1`] = `
         >
           <button
             class="page-link"
+            type="button"
           >
             6
           </button>
@@ -308,6 +329,7 @@ exports[`Component: Pagination ui middle 1`] = `
           <button
             class="disabled page-link"
             disabled=""
+            type="button"
           >
             ...
           </button>
@@ -317,6 +339,7 @@ exports[`Component: Pagination ui middle 1`] = `
         >
           <button
             class="page-link"
+            type="button"
           >
             10
           </button>
@@ -326,6 +349,7 @@ exports[`Component: Pagination ui middle 1`] = `
         >
           <button
             class="page-link"
+            type="button"
           >
             <i
               class="icon material-icons"

diff --git a/src/form/ModalPicker/__snapshots__/ModalPicker.test.tsx.snap b/src/form/ModalPicker/__snapshots__/ModalPicker.test.tsx.snap
@@ -116,6 +116,7 @@ exports[`Component: ModalPicker ui default 1`] = `
                   >
                     <button
                       class="page-link"
+                      type="button"
                     >
                       1
                     </button>
@@ -125,6 +126,7 @@ exports[`Component: ModalPicker ui default 1`] = `
                   >
                     <button
                       class="page-link"
+                      type="button"
                     >
                       2
                     </button>
@@ -134,6 +136,7 @@ exports[`Component: ModalPicker ui default 1`] = `
                   >
                     <button
                       class="page-link"
+                      type="button"
                     >
                       3
                     </button>
@@ -143,6 +146,7 @@ exports[`Component: ModalPicker ui default 1`] = `
                   >
                     <button
                       class="page-link"
+                      type="button"
                     >
                       <i
                         class="icon material-icons"
@@ -364,6 +368,7 @@ exports[`Component: ModalPicker ui loading 1`] = `
                   >
                     <button
                       class="page-link"
+                      type="button"
                     >
                       1
                     </button>
@@ -373,6 +378,7 @@ exports[`Component: ModalPicker ui loading 1`] = `
                   >
                     <button
                       class="page-link"
+                      type="button"
                     >
                       2
                     </button>
@@ -382,6 +388,7 @@ exports[`Component: ModalPicker ui loading 1`] = `
                   >
                     <button
                       class="page-link"
+                      type="button"
                     >
                       3
                     </button>
@@ -391,6 +398,7 @@ exports[`Component: ModalPicker ui loading 1`] = `
                   >
                     <button
                       class="page-link"
+                      type="button"
                     >
                       <i
                         class="icon material-icons"