[Button]: crash on Safari 17 due to missing ElementInternals.states guard in _setBadgeOverlayStyle

Đang mở Phù hợp với người mới
  • Có gì không ổn?
#14,270 1 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 2 ngày

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

Đánh giá

Độ khó
1/5
Thời gian dự kiến
Dưới một giờ
Mức phù hợp với người mới
87/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
accessibility, frontend

Hướng nghiên cứu

Đọc packages/main/src/Button.ts và kiểm tra _setBadgeOverlayStyle() cùng lời gọi hàm này từ onBeforeRendering(). Xác nhận cách dự án xử lý mức hỗ trợ ElementInternals.states của trình duyệt, sau đó chạy các bài kiểm thử Button liên quan hoặc tái hiện vấn đề trên Safari 17. Hoàn thành khi các nút được hiển thị không có lỗi và trạng thái badge được áp dụng ở nơi API được hỗ trợ.

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

Mô tả

bug TOPIC B

Bug Description

Button._setBadgeOverlayStyle() unconditionally accesses this._internals.states, which is undefined on Safari 17. This causes an unhandled promise rejection that crashes all UI5 buttons on the page, regardless of whether a badge is used.

Error

TypeError: undefined is not an object (evaluating 'this._internals.states.delete')

Affected Code

packages/main/src/Button.ts → _setBadgeOverlayStyle():

_setBadgeOverlayStyle() {
    const needsOverflowVisible = ...;
    if (needsOverflowVisible) {
        this._internals.states.add("has-overlay-badge");    // crashes
    } else {
        this._internals.states.delete("has-overlay-badge"); // crashes
    }
}

This method is called unconditionally from onBeforeRendering(), so every button render on Safari 17 triggers the crash.

Root Cause

Safari 17 does not support the CSS Custom State API (ElementInternals.states). The property exists on _internals only in browsers that support this API.

Expected Behavior

Buttons render without error on Safari 17. Badge state simply isn't applied (acceptable degradation).

Proposed Fix

this._internals?.states?.add("has-overlay-badge");
this._internals?.states?.delete("has-overlay-badge");

Environment

  • @ui5/webcomponents: 2.27.2
  • Browser: Safari 17.0 / macOS Sonoma
  • Not reproducible on Chrome or Safari 18+
Affected Component

No response

Expected Behaviour

No response

Isolated Example

No response

Steps to Reproduce

No response

Log Output, Stack Trace or Screenshots

No response

Priority

None

UI5 Web Components Version

2.27.2

Browser

Safari

Operating System

No response

Additional Context

No response

Organization

No response

Declaration
  • I’m not disclosing any internal or sensitive information.
Ngôn ngữ chính
TypeScript
Star
1.8k
Fork
290
Merge trung bình
2 ngày 14 giờ
Pull request đã merge (30 ngày)
54

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

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 UI5/webcomponents

Tất cả issue của UI5/webcomponents

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.