callstack / callstack/react-native-paper
FAB.Group causes DOM nesting warning on web platform: <button> inside <button>
- 主要语言
- TypeScript
- 星标
- 14.5k
- 派生
- 2.2k
- 平均合并
- 5 天 23 小时
- 30 天内合并 PR
- 12
描述
### 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
贡献指南
调研方向
先在一个最小化的 Expo 项目中使用 FAB.Group 和 Portal 重现 BugFABExample,然后使用 `expo start --web` 运行它,并检查渲染出的按钮结构。当 Web 平台不再针对嵌套的 button 元素记录 validateDOMNesting 警告时,即表示完成。
由索引模型根据 Issue 内容生成。
评估
- 技术栈
- react-native, typescript
- 领域
- frontend, web-dev
- Issue 类型
- 缺陷
- 难度
- 3/5
- 预计耗时
- 1-2 天
- 活跃度
- 停滞
- 描述清晰度
- 基本清楚
- 新手友好度
- 35/100