Skip to content

Prevent unintentional form submission in button components#1087

Open
lucasn4s wants to merge 1 commit intomainfrom
hotfix/prevent-unintentional-form-submit-16634732863355235093
Open

Prevent unintentional form submission in button components#1087
lucasn4s wants to merge 1 commit intomainfrom
hotfix/prevent-unintentional-form-submit-16634732863355235093

Conversation

@lucasn4s
Copy link
Copy Markdown
Collaborator

@lucasn4s lucasn4s commented May 6, 2026

This change addresses an issue where CdsSegmentedControl and other button-based components would trigger a native form submission when clicked inside a <form> element.

Changes:

  • Added type="button" to SegmentedControl.vue, IconButton.vue, FlatButton.vue, MobileNavigation.vue, and internal buttons in StepperInput.vue.
  • Updated Button.vue to support a type prop that defaults to 'button'.
  • Added a new unit test for SegmentedControl to verify the fix and prevent regressions.
  • Updated Vitest snapshots to reflect the addition of the type attribute.
  • Incremented project version to 3.158.1.

Fixes #1086


PR created automatically by Jules for task 16634732863355235093 started by @lucasn4s

- Add type="button" to SegmentedControl, IconButton, FlatButton, MobileNavigation, and StepperInput.
- Update Button.vue to support a type prop defaulting to "button".
- Add unit tests for SegmentedControl form submission.
- Update snapshots and project version.

Co-authored-by: lucasn4s <17988272+lucasn4s@users.noreply.github.com>
@google-labs-jules
Copy link
Copy Markdown
Contributor

👋 Jules, reporting for duty! I'm here to lend a hand with this pull request.

When you start a review, I'll add a 👀 emoji to each comment to let you know I've read it. I'll focus on feedback directed at me and will do my best to stay out of conversations between you and other bots or reviewers to keep the noise down.

I'll push a commit with your requested changes shortly after. Please note there might be a delay between these steps, but rest assured I'm on the job!

For more direct control, you can switch me to Reactive Mode. When this mode is on, I will only act on comments where you specifically mention me with @jules. You can find this option in the Pull Request section of your global Jules UI settings. You can always switch back!

New to Jules? Learn more at jules.google/docs.


For security, I will only act on instructions from the user who triggered this task.

@github-actions github-actions Bot added the 🐛 Bug Algo não está funcionando label May 6, 2026
@greptile-apps
Copy link
Copy Markdown
Contributor

greptile-apps Bot commented May 6, 2026

Greptile Summary

Esta PR corrige um bug em que componentes de botão (SegmentedControl, FlatButton, IconButton, MobileNavigation, StepperInput) disparavam submissão nativa de formulário ao serem clicados dentro de um elemento <form>, pois o atributo type ausente fazia o browser assumir o padrão submit.

  • Adicionado type="button" estático em FlatButton, IconButton, MobileNavigation e StepperInput; em SegmentedControl aplicado via loop v-for.
  • Button.vue passou a expor uma prop type configurável (padrão 'button'), permitindo uso explícito como submit ou reset quando necessário.
  • Adicionados testes para SegmentedControl cobrindo snapshot, presença do atributo e ausência de submissão acidental; snapshots de outros componentes atualizados para refletir o novo atributo.

Confidence Score: 4/5

A mudança é segura para merge; resolve um comportamento indesejado sem risco de regressão nos componentes afetados.

A correção é direta e bem coberta por testes. O único ponto que merece atenção é a ausência de validador na prop type do Button.vue — qualquer string inválida seria repassada silenciosamente ao HTML — e a inconsistência entre Button.vue (prop configurável) e FlatButton.vue (valor fixo), que pode surpreender consumidores que precisem de um FlatButton como submit.

src/components/Button.vue (prop type sem validador) e src/components/FlatButton.vue (sem suporte a type configurável).

Important Files Changed

Filename Overview
src/components/Button.vue Adicionada prop type configurável com padrão 'button'; falta validador para garantir que apenas valores HTML válidos sejam aceitos.
src/components/FlatButton.vue type="button" adicionado como valor fixo, diferentemente do Button.vue que expõe uma prop configurável; pode limitar uso futuro como submit button.
src/components/SegmentedControl.vue type="button" adicionado corretamente nos botões do loop v-for para prevenir submissão acidental de formulários.
src/components/StepperInput.vue type="button" adicionado corretamente nos botões de incremento e decremento.
src/components/IconButton.vue type="button" adicionado corretamente no elemento <button> interno.
src/components/MobileNavigation.vue type="button" adicionado corretamente no botão de logout.
src/tests/SegmentedControl.spec.ts Novo arquivo de testes cobrindo snapshot, presença de type="button" em todos os botões e prevenção de submissão de formulário.

Reviews (1): Last reviewed commit: "fix: prevent unintentional form submissi..." | Re-trigger Greptile

Comment thread src/components/Button.vue
Comment on lines +130 to +133
type: {
type: String,
default: 'button',
},
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

P2 A prop type aceita qualquer string, mas o atributo nativo type de <button> só suporta 'button', 'submit' e 'reset'. Sem um validador, valores inválidos como 'text' ou 'foo' seriam passados silenciosamente para o HTML sem qualquer aviso no console durante o desenvolvimento.

Suggested change
type: {
type: String,
default: 'button',
},
type: {
type: String,
default: 'button',
validator: (value) => ['button', 'submit', 'reset'].includes(value),
},

Comment on lines 3 to +4
ref="componentRef"
type="button"
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

P2 O Button.vue recebeu uma prop type configurável (padrão 'button'), mas o FlatButton.vue usa type="button" fixo no template, impossibilitando o uso do componente como botão de submissão de formulário. Se houver casos de uso em que um FlatButton deva acionar um submit, a prop configurável deveria ser adicionada aqui também, seguindo o mesmo padrão do Button.vue.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

🐛 Bug Algo não está funcionando

Projects

None yet

Development

Successfully merging this pull request may close these issues.

CdsSegmentedControl dispara envio de formulário indesejado

1 participant