react-native-paper icon indicating copy to clipboard operation
react-native-paper copied to clipboard

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

Open deeeed opened this issue 1 year ago • 4 comments

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 avatar Oct 02 '24 02:10 deeeed

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.

FacuM avatar Feb 16 '25 16:02 FacuM

I created a PR many months ago at https://github.com/callstack/react-native-paper/pull/4514 . Not sure how ot get people to merge...

deeeed avatar Feb 17 '25 02:02 deeeed

The warning is still here in 5.14.5

rosko avatar Sep 11 '25 05:09 rosko

The same problem occurs on the web.(version: 5.14.5)

dppo avatar Oct 22 '25 05:10 dppo