Hacktoberfest 2026：维护者为十月标记出来的 issue，仍然开放、适合新手。 浏览 Hacktoberfest issue

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

未关闭 适合新手
  • 哪里不对？
#36,930 0 条评论 0 个 reaction 已指派 0 人 在 GitHub 查看

维护者通常 1 天内回复

还没有人认领这个 Issue。

评估

难度
2/5
预计耗时
1-3 小时
新手友好度
78/100
Issue 类型
缺陷
描述清晰度
描述清楚
活跃度
活跃
技术栈
typescript
领域
frontend, web-dev

调研方向

首先追踪 checkbox 和 switch 组件中的 initialValueChanged 与 initialCheckedChanged；issue 表明，在 checked 之后更改 value 会导致提交的表单值过时。分别复现两种属性顺序，并将它们的表单数据与原生 checkbox 进行比较。当两个 Fluent 组件无论属性顺序如何都提交声明的值时，即为完成。

由索引模型根据 Issue 内容生成。

描述

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.
主要语言
TypeScript
星标
20.3k
派生
2.9k
平均合并
2 天 6 小时
30 天内合并 PR
72

环境准备

在 Codespaces 中打开

在浏览器里用你自己的 GitHub 账号启动这个项目的开发容器。

  • 没有 Dockerfile 或 Docker Compose 文件
  • 有 Pull Request 模板
  • 没有贡献指南

从这里开始

  1. 先读完整个 Issue，再读项目的贡献指南。
  2. 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
  3. Fork 仓库，在一个分支上完成修改。
  4. 提交 Pull Request，并在描述里引用这个 Issue 编号。

microsoft/fluentui 的其他 Issue

查看 microsoft/fluentui 的全部 Issue

相似的 Issue

更多 TypeScript Issue

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。