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

ToggleSwitch button type="submit" #5823

Open
kurpav opened this issue Mar 26, 2025 · 5 comments
Open

ToggleSwitch button type="submit" #5823

kurpav opened this issue Mar 26, 2025 · 5 comments
Labels
bug Something isn't working component: ToggleSwitch react

Comments

@kurpav
Copy link

kurpav commented Mar 26, 2025

Description

ToggleSwitch component is based on button tag, but it has no type attribute, so by default it has type="submit". This causes issues when the component is used inside form tag.

Steps to reproduce

  1. Add ToggleSwitch component in form tag.
  2. Make it controllable, add checked and onChange attributes.
  3. Check how many times onChange callback is called on init.
  4. Try to switch toggle

Version

36.27.0

Browser

Chrome
@kurpav kurpav added the bug Something isn't working label Mar 26, 2025
@Amraboali25

This comment has been minimized.

Sign in to view
@Amraboali25

This comment has been minimized.

Sign in to view
@Amraboali25

This comment has been minimized.

Sign in to view
ayush-jadaun added a commit to ayush-jadaun/react that referenced this issue Mar 28, 2025
@ayush-jadaun
fix(ToggleSwitch): Prevent unintended form submission
7c1d1d1 
- Add explicit `type="button"` to SwitchButton to prevent default form submission
- Ensure controlled toggle switch behaves consistently inside form elements
- Resolve issue with multiple onChange calls during initialization

Fixes primer#5823
@ayush-jadaun
Copy link

I'd like to work on fixing this ToggleSwitch issue. From my initial analysis, the problem stems from the default button type causing unintended form submissions. I'm prepared to submit a PR that adds type="button" to prevent this behavior and ensure consistent component interaction within forms.

Would you be willing to assign this issue to me?

@dwsosa dwsosa mentioned this issue Mar 29, 2025
Open
13 tasks
@dwsosa
Copy link

dwsosa commented Mar 29, 2025

#5841

I have created a PR for this issue referenced above for your consideration.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug Something isn't working component: ToggleSwitch react
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
5 participants
@lesliecdubs @kurpav @dwsosa @ayush-jadaun @Amraboali25