callstack / callstack/react-native-paper
FAB.Group causes DOM nesting warning on web platform: <button> inside <button>
- Ngôn ngữ chính
- TypeScript
- Star
- 14.5k
- Fork
- 2.2k
- Merge trung bình
- 5 ngày 23 giờ
- Pull request đã merge (30 ngày)
- 12
Mô tả
### Current behaviour
When using the FAB.Group component from react-native-paper within an Expo project, a console warning is displayed:
```
LogBox.web.js:104 Warning: validateDOMNesting(...): cannot appear as a descendant of .
```
This warning suggests that there's an issue with the nested structure of button elements within the FAB.Group component.

### Expected behaviour
The FAB.Group component should render correctly without producing any DOM nesting warnings related to button elements.
### How to reproduce?
Create a new Expo project using the provided minimal setup.
Implement a screen with a FAB.Group component as shown in the BugFABExample component.
Run the project on web (expo start --web).
Open the browser console to observe the warning.
Here's a simplified code snippet demonstrating the issue:
```jsx
import * as React from "react";
import { View } from "react-native";
import { FAB, Portal } from "react-native-paper";
const BugFABExample = () => {
const [open, setOpen] = React.useState(false);
return (
{} },
{ icon: "email", onPress: () => {} },
]}
onStateChange={({ open }) => setOpen(open)}
/>
);
};
export default BugFABExample;
```
### Preview

### What have you tried so far?
- Verified that the issue occurs in a minimal Expo project setup.
- Confirmed that the warning is specific to the web platform.
### Your Environment
| software | version
| --------------------- | -------
| ios | x
| android | x
| react-native | 0.74.5
| react-native-paper | 5.12.5
| node | x.x.x
| npm or yarn | x.x.x
| expo sdk | 51.0.28
Hướng dẫn đóng góp
Hướng nghiên cứu
Bắt đầu bằng việc tái hiện BugFABExample sử dụng FAB.Group và Portal trong một dự án Expo tối giản, sau đó chạy dự án bằng `expo start --web` và kiểm tra cấu trúc button được render. Hoàn tất khi nền tảng web không còn ghi lại cảnh báo validateDOMNesting đối với các phần tử button lồng nhau.
Do mô hình lập chỉ mục viết ra từ nội dung của issue.
Đánh giá
- Công nghệ
- react-native, typescript
- Lĩnh vực
- frontend, web-dev
- Loại issue
- Lỗi
- Độ khó
- 3/5
- Thời gian dự kiến
- 1-2 ngày
- Mức độ hoạt động
- Đình trệ
- Độ rõ ràng
- Khá rõ ràng
- Mức phù hợp với người mới
- 35/100