Skip to content

Fix SSO provider dialog closing when switching pill toggle tabs#1515

Merged
N2D4 merged 1 commit into
devfrom
devin/1779999147-fix-pill-toggle-form-submit
May 29, 2026
Merged

Fix SSO provider dialog closing when switching pill toggle tabs#1515
N2D4 merged 1 commit into
devfrom
devin/1779999147-fix-pill-toggle-form-submit

Conversation

@N2D4
Copy link
Copy Markdown
Contributor

@N2D4 N2D4 commented May 28, 2026

Add type="button" to DesignPillToggle buttons to prevent them from submitting forms. Without this, buttons inside <form> default to type="submit", causing the SSO provider settings dialog to close when switching from Custom back to Shared tab.

Link to Devin session: https://app.devin.ai/sessions/e479ec357e3843719b9b642327c25ab5
Requested by: @N2D4


Summary by cubic

Fixes the SSO provider settings dialog closing when switching between Custom and Shared tabs. Sets type="button" on DesignPillToggle buttons so clicks don't submit the surrounding form.

Written for commit c7a040f. Summary will update on new commits.

Review in cubic

Summary by CodeRabbit

  • Bug Fixes
    • Fixed pill toggle components to prevent unintended form submissions when used within forms.

Review Change Stack

The <button> elements in DesignPillToggle didn't have type="button",
so they defaulted to type="submit" inside <form> elements. This caused
the SSO provider settings dialog to close when switching from Custom
back to Shared tab, because the pill toggle click submitted the form
(and validation passed since shared providers don't require credentials).

Co-Authored-By: Konstantin Wohlwend <n2d4xc@gmail.com>
@vercel
Copy link
Copy Markdown

vercel Bot commented May 28, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
stack-auth-hosted-components Ready Ready Preview, Comment May 28, 2026 8:23pm
stack-auth-internal-tool Ready Ready Preview, Comment May 28, 2026 8:23pm
stack-auth-mcp Ready Ready Preview, Comment May 28, 2026 8:23pm
stack-auth-skills Ready Ready Preview, Comment May 28, 2026 8:23pm
stack-backend Ready Ready Preview, Comment May 28, 2026 8:23pm
stack-dashboard Ready Ready Preview, Comment May 28, 2026 8:23pm
stack-demo Ready Ready Preview, Comment May 28, 2026 8:23pm
stack-docs Ready Ready Preview, Comment May 28, 2026 8:23pm
stack-preview-backend Ready Ready Preview, Comment May 28, 2026 8:23pm
stack-preview-dashboard Ready Ready Preview, Comment May 28, 2026 8:23pm

@devin-ai-integration
Copy link
Copy Markdown
Contributor

🤖 Devin AI Engineer

I'll be helping with this pull request! Here's what you should know:

✅ I will automatically:

  • Address comments on this PR that start with 'DevinAI' or '@devin'.
  • Look at CI failures and help fix them

Note: I can only respond to comments from users who have write access to this repository.

⚙️ Control Options:

  • Disable automatic comment, CI, and merge conflict monitoring

@coderabbitai
Copy link
Copy Markdown
Contributor

coderabbitai Bot commented May 28, 2026

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 1e676ece-c59c-43c9-bd8f-88f9d56103fd

📥 Commits

Reviewing files that changed from the base of the PR and between fa2baa8 and c7a040f.

📒 Files selected for processing (1)
  • packages/dashboard-ui-components/src/components/pill-toggle.tsx

📝 Walkthrough

Walkthrough

The DesignPillToggle component's rendered option buttons now explicitly declare type="button" to prevent default HTML form submission when the toggle is used within form elements.

Changes

Pill Toggle Button Type

Layer / File(s) Summary
Pill toggle button type attribute
packages/dashboard-ui-components/src/components/pill-toggle.tsx
The option button element now explicitly declares type="button" to prevent default form submission behavior when the toggle is used inside forms.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~2 minutes

Poem

A button once lost in the form's swirling tide,
Now marks itself clearly with type as its guide.
No phantom submissions shall steal its intent,
The toggle stands firm—a single line well-spent! 🐰✨

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (4 passed)
Check name Status Explanation
Title check ✅ Passed The title directly describes the main fix: preventing the SSO provider dialog from closing when switching pill toggle tabs, which matches the core change of adding type="button" to prevent form submission.
Description check ✅ Passed The description clearly explains the problem, solution, and impact. It provides context about the issue, references the related request, and includes a link to the Devin session for additional reference.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
📝 Generate docstrings
  • Create stacked PR
  • Commit on current branch
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch devin/1779999147-fix-pill-toggle-form-submit

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

@greptile-apps
Copy link
Copy Markdown
Contributor

greptile-apps Bot commented May 28, 2026

Greptile Summary

Fixes a bug where clicking a DesignPillToggle tab inside the SSO provider settings form would trigger form submission, closing the dialog. The root cause is that <button> elements without an explicit type attribute default to type="submit" inside a <form>.

  • Adds type="button" to the single <button> element in DesignPillToggle, preventing it from submitting any enclosing form on click.
  • No logic, styling, or API changes — the fix is a one-line attribute addition.

Confidence Score: 5/5

Safe to merge — the single-line change is a well-established HTML correctness fix with no side effects.

The entire diff is a one-line addition of type="button" to a button element. This is a correct fix for the described bug and cannot regress any other behavior; buttons with type="button" still fire onClick handlers normally, so the toggle logic and async loading state are unaffected.

No files require special attention.

Important Files Changed

Filename Overview
packages/dashboard-ui-components/src/components/pill-toggle.tsx Adds type="button" to the pill toggle button element, preventing it from defaulting to type="submit" when rendered inside a <form> and inadvertently closing dialogs.

Sequence Diagram

sequenceDiagram
    participant User
    participant PillToggle as DesignPillToggle button
    participant Form as SSO Settings Form
    participant Dialog as Dialog Component

    Note over User,Dialog: Before fix (button type defaults to "submit")
    User->>PillToggle: Click "Custom" tab
    PillToggle->>Form: Triggers form submit event
    Form->>Dialog: Dialog closes (form submission detected)

    Note over User,Dialog: After fix (type="button" explicit)
    User->>PillToggle: Click "Custom" tab
    PillToggle->>PillToggle: handleClick() fires, calls onSelect()
    PillToggle-->>Dialog: No form submit event dispatched
    Dialog-->>User: Dialog stays open, tab switches correctly
Loading

Reviews (1): Last reviewed commit: "Fix pill toggle buttons submitting forms..." | Re-trigger Greptile

@coderabbitai
Copy link
Copy Markdown
Contributor

coderabbitai Bot commented May 28, 2026

Actionable comments posted: 0

Copy link
Copy Markdown

@cubic-dev-ai cubic-dev-ai Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No issues found across 1 file

Tip: cubic could auto-approve low-risk PRs like this, if it thinks it's safe to merge. Learn more

Re-trigger cubic

@N2D4 N2D4 merged commit 0db13f4 into dev May 29, 2026
39 checks passed
@N2D4 N2D4 deleted the devin/1779999147-fix-pill-toggle-form-submit branch May 29, 2026 00:37
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant