Hacktoberfest 2026: los issues que los mantenedores marcaron para octubre, abiertos y aptos para principiantes. Explorar issues de Hacktoberfest

[Bug]: fluent-checkbox submits "on" when the checked attribute is before value

Abierto Apto para principiantes
  • ¿Algo no está bien?
#36,930 0 comentarios 0 reacciones 0 asignados Ver en GitHub

Los mantenedores suelen responder en 1 día

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
2/5
Tiempo estimado
1-3 horas
Aptitud para principiantes
78/100
Tipo de issue
Error
Claridad
Bien especificado
Estado de actividad
Activo
Stack tecnológico
typescript
Área
frontend, web-dev

Línea de trabajo

Empieza rastreando initialValueChanged e initialCheckedChanged en los componentes de checkbox y switch; el issue muestra que cambiar value después de checked hace que el valor enviado en el formulario quede desactualizado. Reproduce ambos órdenes de atributos y compara sus datos de formulario con los de un checkbox nativo. El trabajo estará terminado cuando ambos componentes Fluent envíen el valor declarado independientemente del orden de los atributos.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

Component

Checkbox

Package version

3.1.3

@microsoft/fast-element version

3.0.4

Environment
OS: Windows 11
Browsers: Microsoft Edge 155 (Chromium 155)
npmPackages:
  @fluentui/web-components: 3.1.3
  @microsoft/fast-element: 3.0.4
Current Behavior

When <fluent-checkbox> (or <fluent-switch>) is rendered with the checked attribute before the value attribute, checkbox.value returns the value attribute, but the form submits "on".

Attributes are applied in markup order during the upgrade:

  1. checked → initialCheckedChanged → checked = true → setFormValue(this.value) with the default value "on".
  2. value → initialValueChanged only sets _value, so the form value stays "on":
initialValueChanged(prev, next) {
    this._value = next;
}

With value before checked, the expected value is submitted.

Expected Behavior

The attribute order doesn't matter: a checked <fluent-checkbox checked value="yes"> submits "yes", like <input type="checkbox" checked value="yes">.

Reproduction

https://oonoobmasteroo.github.io/fluent-checkbox-form-value/ (source: https://github.com/oONoobMasterOo/fluent-checkbox-form-value)

Steps to reproduce
  1. Open the reproduction:
<form id="form">
  <fluent-checkbox name="checkedFirst" checked value="yes"></fluent-checkbox>
  <fluent-checkbox name="valueFirst" value="yes" checked></fluent-checkbox>
  <fluent-switch name="switchCheckedFirst" checked value="yes"></fluent-switch>
  <input name="native" type="checkbox" checked value="yes">
  <button type="button" id="check">Show FormData</button>
</form>
<pre id="out"></pre>

<script type="module">
  import "https://cdn.jsdelivr.net/npm/@fluentui/[email protected]/dist/web-components.min.js";

  document.getElementById("check").addEventListener("click", () => {
    const data = Object.fromEntries(new FormData(document.getElementById("form")));
    document.getElementById("out").textContent = JSON.stringify(data, null, 2);
  });
</script>
  1. Click Show FormData.
  2. Result: { "checkedFirst": "on", "valueFirst": "yes", "switchCheckedFirst": "on", "native": "yes" }.

A possible fix: in initialValueChanged, also update the form value when the checkbox is checked (e.g. if (this.checked) this.setFormValue(next)).

Are you reporting an Accessibility issue?

no

Suggested severity

Medium - Has workaround

Products/sites affected

Fluent UI Blazor (FluentCheckbox / FluentSwitch in statically rendered forms; worked around by rendering value before checked)

Are you willing to submit a PR to fix?

yes

Validations
  • Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
  • The provided reproduction is a minimal reproducible example of the bug.
Lenguaje dominante
TypeScript
Estrellas
20.3k
Forks
2.9k
Merge medio
2 d 6 h
PR fusionados (30 d)
53

Preparar el entorno

Abrir en Codespaces

Inicia el contenedor de desarrollo del proyecto en tu navegador, con tu propia cuenta de GitHub.

  • Sin Dockerfile ni archivo de Docker Compose
  • Tiene una plantilla de pull request
  • Sin guía de contribución

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de microsoft/fluentui

Todos los issues de microsoft/fluentui

Issues similares

Más issues de TypeScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.