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

[v4] InputNumber: Missing type declaration for buttons leads to form submit on button click #5700

Closed
m-meier opened this issue May 8, 2024 · 0 comments
Assignees
Labels
Type: Bug Issue contains a bug related to a specific component. Something about the component is not working
Milestone

Comments

@m-meier
Copy link
Contributor

m-meier commented May 8, 2024

Describe the bug

In PrimeVue v4 the InputNumber component uses normal html button elements for increase/decrease buttons. However, they lack a type specification. This leads to the problem that clicking the buttons will perform a form submit when placed within a form. This behavior might be browser specific, but is reproduceable in Google Chrome on Windows

According to the w3c spec:
The attribute's missing value default and invalid value default are both the Submit Button state.

Reproducer

https://stackblitz.com/edit/vitejs-vite-wk6pwr?file=src%2FApp.vue

PrimeVue version

4.0.0-beta.2

Vue version

3.x

Language

TypeScript

Build / Runtime

Vite

Browser(s)

Google Chrome

Steps to reproduce the behavior

In the stackblitz code it will perform a form post when you click on the button in the InputNumber enclosed in the form (white page), however it will work flawlessly when used outside of a form element.

Expected behavior

Never perform a form submit.

@m-meier m-meier added the Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible label May 8, 2024
m-meier added a commit to m-meier/primevue that referenced this issue May 8, 2024
Adds a button type to html button element to prevent form submits when placed within a form.
tugcekucukoglu added a commit that referenced this issue May 16, 2024
fix(InputNumber): add button type attribute, fixes #5700
@tugcekucukoglu tugcekucukoglu added this to the 3.53.0 milestone May 16, 2024
@tugcekucukoglu tugcekucukoglu added Type: Bug Issue contains a bug related to a specific component. Something about the component is not working and removed Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible labels May 16, 2024
@tugcekucukoglu tugcekucukoglu modified the milestones: 3.53.0, 4.0.0-rc.1 May 16, 2024
tugcekucukoglu added a commit that referenced this issue May 16, 2024
@tugcekucukoglu tugcekucukoglu self-assigned this May 16, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Type: Bug Issue contains a bug related to a specific component. Something about the component is not working
Projects
None yet
Development

No branches or pull requests

2 participants