Resumo do problema
Quando CdsSegmentedControl é utilizado dentro de um formulário (ex.: envolvido por ShowForm de @sysvale/show), clicar em um botão de segmento faz o navegador realizar um envio nativo do formulário, resultando em recarregamento da página. Prints são muito bem-vindos.
Passos para reproduzir
- Criar um formulário usando
ShowForm
- Adicionar um componente
CdsSegmentedControl dentro do formulário
- Adicionar um manipulador de envio do formulário (ex.: para salvar dados)
- Clicar em qualquer segmento no controle segmentado
Qual o comportamento esperado?
O segmento deve ser selecionado sem afetar o formulário. O navegador NÃO deve disparar o envio do formulário ao clicar em um segmento.
Detalhes técnicos
Causa Raiz
Os botões do componente têm como padrão type="submit" (padrão HTML para botões). Em HTML, elementos <button> dentro de um <form> disparam o envio do formulário quando clicados, a menos que sejam explicitamente definidos como type="button".
Fonte: src/components/SegmentedControl.vue
<button
v-for="(segment, index) in segments"
:key="index"
class="segment-control__button"
...
@click="handleClick(segment, index)"
>
Nenhum atributo type é especificado, então o padrão é submit.
Correção Sugerida
Adicionar type="button" a todos os elementos de botão:
<button
v-for="(segment, index) in segments"
:key="index"
class="segment-control__button"
type="button"
...
@click="handleClick(segment, index)"
>
Esta é a solução mais limpa e compatível com padrões que:
- Previne envios de formulário indesejados
- Mantém toda a funcionalidade existente
- Não quebra acessibilidade ou navegação por teclado
Impacto
Qualquer formulário que usar CdsSegmentedControl disparará envio não intencional quando os segmentos forem clicados, causando recarregamento da página e potencial perda de estado do formulário.
Checklist de Testes
Contexto Adicional
Este é um problema comum com componentes de botão que não definem explicitamente type="button". Outros componentes baseados em botão no Cuida podem ter o mesmo problema e devem ser auditados.
Padrões Relacionados: MDN - Tipo de Botão
Resumo do problema
Quando
CdsSegmentedControlé utilizado dentro de um formulário (ex.: envolvido porShowFormde@sysvale/show), clicar em um botão de segmento faz o navegador realizar um envio nativo do formulário, resultando em recarregamento da página. Prints são muito bem-vindos.Passos para reproduzir
ShowFormCdsSegmentedControldentro do formulárioQual o comportamento esperado?
O segmento deve ser selecionado sem afetar o formulário. O navegador NÃO deve disparar o envio do formulário ao clicar em um segmento.
Detalhes técnicos
Causa Raiz
Os botões do componente têm como padrão
type="submit"(padrão HTML para botões). Em HTML, elementos<button>dentro de um<form>disparam o envio do formulário quando clicados, a menos que sejam explicitamente definidos comotype="button".Fonte:
src/components/SegmentedControl.vueNenhum atributo
typeé especificado, então o padrão ésubmit.Correção Sugerida
Adicionar
type="button"a todos os elementos de botão:Esta é a solução mais limpa e compatível com padrões que:
Impacto
Qualquer formulário que usar
CdsSegmentedControldisparará envio não intencional quando os segmentos forem clicados, causando recarregamento da página e potencial perda de estado do formulário.Checklist de Testes
Contexto Adicional
Este é um problema comum com componentes de botão que não definem explicitamente
type="button". Outros componentes baseados em botão no Cuida podem ter o mesmo problema e devem ser auditados.Padrões Relacionados: MDN - Tipo de Botão