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

[Bug Report] v-pagination trigger v-form submit #5212

Closed
materight opened this issue Oct 3, 2018 · 5 comments · Fixed by #5229
Closed

[Bug Report] v-pagination trigger v-form submit #5212

materight opened this issue Oct 3, 2018 · 5 comments · Fixed by #5229
Labels
good first issue A quick-win fix that would be great for new contributors T: bug Functionality that does not work as intended/expected
Milestone

Comments

@materight
Copy link
Contributor

Versions and Environment

Vuetify: 1.2.6
Vue: 2.5.17
Browsers: Chrome69
OS: Windows 10

Steps to reproduce

Use the v-pagination component inside a v-form or form and change page

Expected Behavior

It should not trigger form submit

Reproduction Link

https://codepen.io/materight/pen/YJwgZy

@materight materight changed the title v-pagination trigger v-form submit [Bug Report] v-pagination trigger v-form submit Oct 3, 2018
@soupjake
Copy link

soupjake commented Oct 5, 2018

If you look at the v-data-table example with external pagination, you place the v-pagination outside of the v-data-table and sync the items within using the "pagination.sync" property. Perhaps you can do something similar with your form?

@KaelWD KaelWD added T: bug Functionality that does not work as intended/expected good first issue A quick-win fix that would be great for new contributors labels Oct 5, 2018
@materight
Copy link
Contributor Author

Sorry, that's not what I meant. If you look at the example you will notice that the form is sent when you click on a page. I have to use the v-pagination inside a form only for displaying items, i don't need to use paginations data with the form.

@soupjake
Copy link

soupjake commented Oct 5, 2018

Okay so after some digging, the buttons used for the pagination component use the standard HTML tag rather than . The standard HTML button object's event defaults to submit "default for all browsers, except Internet Explorer" (from w3schools) and so that's the case for the buttons used within the pagination component since their type isn't defined as seen here. You can test this by putting a standard button within a form without a type or click function attached to it and it'll submit the form which is the same as your issue. You can even go in and manually change the types of each button in the pagination to "button" and it'll stop the form from submitting.

I still think you'd be able to achieve what you want with the pagination component outside of the form or use something like the v-stepper but for now it seems the buttons within will keep firing off the default submit event unless you're able to somehow override this. Maybe this can get looked into by the dev team and maybe they can change the type for these buttons to "button" instead?

@materight
Copy link
Contributor Author

You are right, thank you! I'll try to fix this and make a pull request.

johnleider pushed a commit that referenced this issue Oct 24, 2018
* Fix VPagination acting as submit

* Fixed double quotes

* Updated unit tests
nekosaur pushed a commit that referenced this issue Oct 26, 2018
* Fix VPagination acting as submit

* Fixed double quotes

* Updated unit tests
@KaelWD
Copy link
Member

KaelWD commented Dec 1, 2018

Fixed in v1.3.3 with #5229

@KaelWD KaelWD closed this as completed Dec 1, 2018
@KaelWD KaelWD added this to the v1.3.x milestone Dec 1, 2018
@lock lock bot locked as resolved and limited conversation to collaborators Dec 1, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
good first issue A quick-win fix that would be great for new contributors T: bug Functionality that does not work as intended/expected
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants