Prevent unintentional form submission in button components#1087
Prevent unintentional form submission in button components#1087
Conversation
- 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>
|
👋 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 New to Jules? Learn more at jules.google/docs. For security, I will only act on instructions from the user who triggered this task. |
Greptile SummaryEsta PR corrige um bug em que componentes de botão (
Confidence Score: 4/5A 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 src/components/Button.vue (prop
|
| 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
| type: { | ||
| type: String, | ||
| default: 'button', | ||
| }, |
There was a problem hiding this comment.
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.
| type: { | |
| type: String, | |
| default: 'button', | |
| }, | |
| type: { | |
| type: String, | |
| default: 'button', | |
| validator: (value) => ['button', 'submit', 'reset'].includes(value), | |
| }, |
| ref="componentRef" | ||
| type="button" |
There was a problem hiding this comment.
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.
This change addresses an issue where
CdsSegmentedControland other button-based components would trigger a native form submission when clicked inside a<form>element.Changes:
type="button"toSegmentedControl.vue,IconButton.vue,FlatButton.vue,MobileNavigation.vue, and internal buttons inStepperInput.vue.Button.vueto support atypeprop that defaults to'button'.SegmentedControlto verify the fix and prevent regressions.typeattribute.3.158.1.Fixes #1086
PR created automatically by Jules for task 16634732863355235093 started by @lucasn4s