MultiSelector: add showTooltip to list the selected options on the trigger

Đang mở
  • Có gì không ổn?
#159 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

@ironAiken2 đang làm issue này rồi.

Từ ngày 10/11/2026.

  • #162 của @ironAiken2 — đang mở

Đánh giá

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

Hướng nghiên cứu

Start at the ui-common MultiSelector wrapper and inspect how it uses useMergedValue, resolves option labels, merges refs, and forwards onOpenChange; then check the existing Tooltip API. Add the opt-in trigger tooltip under the conditions in the proposal, and verify it lists all selected labels while staying closed for an open listbox, disabled state, and renderTrigger.

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

Mô tả

Problem

When a MultiSelector trigger has more selections than it shows, the rest collapse into +N (after three labels in triggerDisplay="labels", after maxBadges badges in "badges"), and long labels are cut off by the ellipsis. The user cannot tell which options are selected without opening the listbox.

Astryx MultiSelector offers no hook for this: +N is fixed text, formatValue returns a string and is not called for "badges", and renderTrigger replaces the whole field. Consumers who wrap the selector in their own Tooltip have to track the selection, merge refs, and keep the tooltip shut while the listbox is open.

Proposal

Add an opt-in showTooltip?: boolean prop to ui-common MultiSelector. When it is set and at least one option is selected, a ui-common Tooltip anchored to the trigger (anchorRef) lists every selected label, comma-separated.

  • The selection comes from the wrapper's existing useMergedValue, so controlled and uncontrolled use both work.
  • Labels are resolved from options (including section options), falling back to the value.
  • The consumer's ref is merged with the anchor ref.
  • The tooltip is held shut while the listbox is open (onOpenChange is still forwarded).
  • No tooltip when disabled, so it does not compete with Astryx's disabledMessage tooltip, and none with renderTrigger, whose control the caller owns.

The default stays off, so existing call sites are unchanged.

Context

lablup/backend.ai-webui#10955 built this inside a product wrapper; that PR is on hold until this lands, after which the wrapper goes back to a plain re-export (lablup/backend.ai-webui#10986).

Ngôn ngữ chính
TypeScript
Star
2
Fork
0
Merge trung bình
21 giờ 38 phút
Pull request đã merge (30 ngày)
38

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 lablup/ui-common

Tất cả issue của lablup/ui-common

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.