Allow Floating Strategy to be Configurable for Popover

Đang mở
  • Có gì không ổn?
#1,504 8 bình luận 2 reaction 0 người được giao Xem trên GitHub

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
45/100
Loại issue
Tính năng
Độ rõ ràng
Đặc tả rõ ràng
Mức độ hoạt động
Đình trệ
Công nghệ
react, typescript
Lĩnh vực
frontend

Hướng nghiên cứu

Bắt đầu từ component Popover và lệnh gọi useFloating của @floating-ui/react. Thêm prop strategy absolute/fixed tùy chọn và xác minh rằng prop này được truyền đến useFloating; hoàn tất khi Popover có thể sử dụng định vị fixed cho các phần tử cha có overflow không hiển thị.

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

Mô tả

discussion
  • I have searched the Issues to see if this bug has already been reported
  • I have tested the latest version

Summary

Describe how it should work, and provide examples of the solution, which might include screenshots or code snippets.

Hello and thanks for providing this reference implementation for Flowbite. I have a use case for the Popover that is not currently covered but can easily be added.

I am using a Popover component inside of a parent which is overflow: auto set. This means the popover is cut off. See screen shot.

Screenshot 2024-10-25 at 11 57 19 AM

This is due to @floating-ui/react using position: absolute by default.

The good news is that useFloating has a strategy prop that can be passed to override this if necessary. In scenarios like mine, position: fixed is needed. I did some testing, and it works well. See screen shot.

Screenshot 2024-10-25 at 11 59 55 AM

The popover is still attached to the reference element and scrolls along with it.

Context

What are you trying to accomplish? How is your use case affected by not having this feature?

Popover should be updated to accept a strategy prop of type:

strategy?: 'absolute' | 'fixed';

This is passed to useFloating from the @floating-ui/react library.

Without this feature, popovers are cut off in parents that have overflow other than visible.

I'm happy to create a PR for this if it will help.

Ngôn ngữ chính
TypeScript
Star
2.1k
Fork
502
Merge trung bình
19 giờ 16 phút
Pull request đã merge (30 ngày)
2

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 themesberg/flowbite-react

Tất cả issue của themesberg/flowbite-react

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.