Hacktoberfest 2026: le issue che i maintainer hanno segnato per ottobre, aperte e adatte ai principianti. Sfoglia le issue Hacktoberfest

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

Aperta Adatta ai principianti
  • Qualcosa non va?
#36,930 0 commenti 0 reazioni 0 assegnatari Vedi su GitHub

I maintainer di solito rispondono entro 1 giorno

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
2/5
Tempo stimato
1-3 ore
Idoneità per principianti
78/100
Tipo di issue
Bug
Chiarezza
Specificata chiaramente
Stato di attività
Attiva
Stack tecnologico
typescript
Ambito
frontend, web-dev

Direzione di ricerca

Inizia tracciando initialValueChanged e initialCheckedChanged per i componenti checkbox e switch; l’issue mostra che modificare value dopo checked lascia obsoleto il valore inviato nel modulo. Riproduci entrambi gli ordini degli attributi e confronta i dati del modulo con quelli di una checkbox nativa. Il lavoro è concluso quando entrambi i componenti Fluent inviano il valore dichiarato indipendentemente dall’ordine degli attributi.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

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.
Lingua principale
TypeScript
Stelle
20.3k
Fork
2.9k
Merge medio
2g 6h
PR unite (30g)
53

Preparare l'ambiente

Apri in Codespaces

Avvia il container di sviluppo del progetto nel browser, con il tuo account GitHub.

  • Nessun Dockerfile né file Docker Compose
  • Ha un modello di pull request
  • Nessuna guida per i contributori

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di microsoft/fluentui

Tutte le issue di microsoft/fluentui

Issue simili

Altre issue su TypeScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.