Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
deeeed opened this issue Oct 2, 2024 · 2 comments

Comments

@deeeed
Copy link

deeeed commented Oct 2, 2024

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(...): <button> cannot appear as a descendant of <button>.

This warning suggests that there's an issue with the nested structure of button elements within the FAB.Group component.
image

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:

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 (
    <View style={{ flex: 1 }}>
      <Portal>
        <FAB.Group
          open={open}
          visible
          icon={open ? "close" : "plus"}
          actions={[
            { icon: "star", onPress: () => {} },
            { icon: "email", onPress: () => {} },
          ]}
          onStateChange={({ open }) => setOpen(open)}
        />
      </Portal>
    </View>
  );
};

export default BugFABExample;

Preview

image

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
@deeeed deeeed added the bug label Oct 2, 2024
@FacuM
Copy link

FacuM commented Feb 16, 2025

I can confirm that this bug shouldn't be stalled or closed as it is still present in the latest stable (5.x) release.

Regardless of the warning, the component does work properly, though.

@deeeed
Copy link
Author

deeeed commented Feb 17, 2025

I created a PR many months ago at #4514 . Not sure how ot get people to merge...

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

3 participants