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-slider initial value is not submitted with the form

Đang mở Phù hợp với người mới
  • Có gì không ổn?
#36,927 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
76/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, web-dev
Lĩnh vực
frontend, full-stack

Hướng nghiên cứu

Tìm phần triển khai fluent-slider và cách thiết lập giá trị biểu mẫu, đặc biệt là initialValueChanged() và setupDefaultValue() được mô tả trong issue. Theo dõi cách thuộc tính value ban đầu được xử lý trước khi kết nối và so sánh với hành vi của input range gốc. Tái hiện lỗi bằng ví dụ được liên kết và xác minh rằng FormData có level trước khi thanh trượt được di chuyển.

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

Mô tả

Component

Slider

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-slider> is rendered with a value attribute (e.g. server-rendered HTML), slider.value returns that value, but the form value is never set. The slider is missing from the submitted form data until its value is changed.

The value attribute is applied before the element is connected, so initialValueChanged only sets _value. Then setupDefaultValue() skips the value setter because _value is already set, so setFormValue() is never called:

setupDefaultValue() {
    if (!this._value) {
        this.value = this.initialValue ?? this.midpoint;
    }
    // ...
}
Expected Behavior

The initial value is submitted with the form, like <input type="range" value="7">.

Reproduction

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

Steps to reproduce
  1. Open the reproduction:
<form id="form">
  <fluent-slider name="level" min="0" max="10" value="7"></fluent-slider>
  <input name="native" type="range" min="0" max="10" value="7">
  <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 slider = document.querySelector("fluent-slider");
    const data = Object.fromEntries(new FormData(document.getElementById("form")));
    document.getElementById("out").textContent = JSON.stringify({ sliderValue: slider.value, formData: data }, null, 2);
  });
</script>
  1. Click Show FormData.
  2. sliderValue is "7", but formData only contains native: { "native": "7" }.
  3. Move the slider (or set slider.value from script) and click again: level is now in formData.
Are you reporting an Accessibility issue?

no

Suggested severity

Medium - Has workaround

Products/sites affected

Fluent UI Blazor (FluentSlider in statically rendered forms)

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.