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.

Sign up for GitHub

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

Jump to bottom

[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
Closed

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

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

Comments

@m-meier
Copy link
Contributor

m-meier commented May 8, 2024 •
edited
Loading

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
@m-meier
fix(InputNumber): add button type attribute, fixes primefaces#5700
5173d53 
Adds a button type to html button element to prevent form submits when placed within a form.
@m-meier m-meier mentioned this issue May 8, 2024
Merged
tugcekucukoglu added a commit that referenced this issue May 16, 2024
@tugcekucukoglu
Merge pull request #5701 from m-meier/patch-3
ba2842d 
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
Fixed #5700
c3669ad
@tugcekucukoglu tugcekucukoglu self-assigned this May 16, 2024
@m-meier m-meier mentioned this issue May 17, 2024
Closed
@gn00029914 gn00029914 mentioned this issue Jul 25, 2024
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@tugcekucukoglu tugcekucukoglu

Labels
Type: Bug Issue contains a bug related to a specific component. Something about the component is not working
Projects
None yet
Milestone
4.0.0-beta.4
Development

Successfully merging a pull request may close this issue.

[Snyk] Upgrade primevue from 3.53.0 to 4.0.0 gn00029914/vite-app-demo
2 participants
@m-meier @tugcekucukoglu