Hacktoberfest 2026: những issue maintainer đã đánh dấu cho tháng Mười, đang mở và phù hợp người mới. Xem issue Hacktoberfest

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

Đang mở Phù hợp với người mới
  • Có gì không ổn?
#36,930 0 bình luận 0 reaction 0 người được giao Xem trên GitHub

Maintainer thường phản hồi trong vòng 1 ngày

Chưa có ai nhận issue này.

Đánh giá

Độ khó
2/5
Thời gian dự kiến
1-3 giờ
Mức phù hợp với người mới
78/100
Loại issue
Lỗi
Độ rõ ràng
Đặc tả rõ ràng
Mức độ hoạt động
Sôi nổi
Công nghệ
typescript
Lĩnh vực
frontend, web-dev

Hướng nghiên cứu

Bắt đầu bằng cách lần theo initialValueChanged và initialCheckedChanged trong các component checkbox và switch; issue cho thấy việc thay đổi value sau checked khiến giá trị biểu mẫu được gửi đi bị cũ. Thử tái hiện cả hai thứ tự thuộc tính và so sánh dữ liệu biểu mẫu của chúng với checkbox gốc. Hoàn thành khi cả hai component Fluent đều gửi giá trị đã khai báo bất kể thứ tự thuộc tính.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Mô tả

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.
Ngôn ngữ chính
TypeScript
Star
20.3k
Fork
2.9k
Merge trung bình
2 ngày 6 giờ
Pull request đã merge (30 ngày)
53

Chuẩn bị môi trường

Mở trong Codespaces

Khởi chạy dev container của dự án ngay trên trình duyệt, bằng tài khoản GitHub của bạn.

  • Không có Dockerfile hay tệp Docker Compose
  • Có mẫu pull request
  • Không có hướng dẫn đóng góp

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Issue khác của microsoft/fluentui

Tất cả issue của microsoft/fluentui

Issue tương tự

Thêm issue về TypeScript

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.