Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Pagination button submitting the form #809

Closed
ellinge opened this issue Jun 14, 2023 · 2 comments · Fixed by #811
Closed

Pagination button submitting the form #809

ellinge opened this issue Jun 14, 2023 · 2 comments · Fixed by #811
Labels
🐛 bug Something isn't working confirmed This bug was confirmed good first issue Good for newcomers help wanted Extra attention is needed

Comments

@ellinge
Copy link

ellinge commented Jun 14, 2023

Describe the bug
When using the Pagination component within a form, when you click on a page or prev/next button,, the form is submitted

Seems to be same issue as #756

To Reproduce
Steps to reproduce the behavior:

  1. Create a form
  2. Add a pagination inside the form

Expected behavior
The component should set type="button" on prev/next/page to disable default behavior of submitting a wrapped form.
One can work around the issue for page items by overriding the render but that is not available for next/prev:
renderPaginationButton={p => <Pagination.Button {...p} type="button" />}

Project information:

  • Tailwind: 3.3.2
  • Flowbite: 1.6.5
  • Flowbite React: 0.4.7
  • Type: Vite and CRA
@rluders rluders added 🐛 bug Something isn't working help wanted Extra attention is needed good first issue Good for newcomers confirmed This bug was confirmed labels Jun 14, 2023
@rluders
Copy link
Collaborator

rluders commented Jun 14, 2023

This should be a very simple fix. If someone is interested to provide a PR for it. Just add type="button" to the Pagination.Button component should solve the issue. Don't need to overcomplicate.

@IuriPires
Copy link
Contributor

@rluders taking care of it ;)

IuriPires added a commit to IuriPires/flowbite-react that referenced this issue Jun 14, 2023
button now has type button because it was causing the page to refresh

fix themesberg#809
IuriPires added a commit to IuriPires/flowbite-react that referenced this issue Jun 14, 2023
Button now has a type button to prevent page to refresh

fix themesberg#809
IuriPires added a commit to IuriPires/flowbite-react that referenced this issue Jun 15, 2023
Button now has a type button to prevent page to refresh

fix themesberg#809
rluders pushed a commit that referenced this issue Jun 15, 2023
Button now has a type button to prevent page to refresh

fix #809
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
🐛 bug Something isn't working confirmed This bug was confirmed good first issue Good for newcomers help wanted Extra attention is needed
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants