callstack / callstack/react-native-paper

FAB.Group causes DOM nesting warning on web platform: <button> inside <button>

Ouverte
#4,515 4 commentaires 2 réactions 0 personnes assignées Voir sur GitHub
bug FAB
Langage dominant
TypeScript
Étoiles
14.5k
Forks
2.2k
Merge moyen
5 j 23 h
PR mergées (30 j)
12

Description

### 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.
![image](https://github.com/user-attachments/assets/6fb10bc1-9338-49e3-be4a-8cdf194873df)

### 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

![image](https://github.com/user-attachments/assets/1e3acd83-b253-41c3-9df3-827d56d2ad8b)

### 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

Guide de contribution

Ouvrir le guide de contribution

Piste de recherche

Start with the BugFABExample reproduction using FAB.Group and Portal in a minimal Expo project, then run it with `expo start --web` and inspect the rendered button structure. Done means the web platform no longer logs a validateDOMNesting warning for nested button elements.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Évaluation

Stack technique
react-native, typescript
Domaine
frontend, web-dev
Type d'issue
Bug
Difficulté
3/5
Temps estimé
1-2 jours
Activité
À l'abandon
Clarté
Plutôt claire
Accessibilité débutants
35/100

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.