FAB when rendered on web Warning: validateDOMNesting(...): <button> cannot appear as a descendant of <button>.

[wesleyhunter]

Is there an existing issue for this?

• I have searched the existing issues

Explain what you did

I added the following to my app:

        <FAB
            icon={{ name: 'group-add', color: theme.colors.white }}
            size="small"
            placement='right'
            onPress={addGroup}
        />

Expected behavior

This works fine on mobile devices but when tested as web site, my browser throws the following warning:

  Warning: validateDOMNesting(...): <button> cannot appear as a descendant of <button>.

Describe the bug

I added the following to my app:

        <FAB
            icon={{ name: 'group-add', color: theme.colors.white }}
            size="small"
            placement='right'
            onPress={addGroup}
        />

This works fine on mobile devices but when tested as web site, my browser throws the following warning:

  Warning: validateDOMNesting(...): <button> cannot appear as a descendant of <button>.

If I inspect the elements then it looks like both the icon is wrapped in a button which in turn is wrapped again in another button nearer to the Fabs container level which causes this warning.

Suggest that only the outer button is needed and not one wrapping the icon as well.

Steps To Reproduce

Create an app with a FAB on it and provide the FAB with an icon value and specify an OnPress callback.

run the app and view on web browser not mobile.

Screenshots

No response

Your Environment

`npx @rneui/envinfo`

  ```
    React Native Elements Env Info

Global Dependencies:

No related dependency found

Local Dependencies:

• @rneui/base : ^4.0.0-rc.7

• @rneui/themed : ^4.0.0-rc.8

• expo : ~49.0.13

• react : 18.2.0

• react-native : 0.72.6

• @types/react : ~18.2.14

[rkasper]

We see this happening with Chip and Button, as well. Put an Icon on a Chip or a Button, for example:

<Chip
 ...
 icon=[your icon stuff goes here]
...
/>

and you will get a message like this in your web browser:

_Warning: validateDOMNesting(...): <button> cannot appear as a descendant of <button>_

What's the best advice on what to do about this?

[Progressive-Programmer]

I am facing this same issue, it's even hard to find the file which is causing this. issue

[utkarsh1097]

This happens because Button, Icon, and Chip all use <button> as the underlying HTML tag to render the DOM elements. And there are rules enforced by React on how HTML elements can be laid out for rendering the resulting DOM.

To resolve this (until it can be fixed from source), I can suggest two approaches:

1. (Recommended) Use Icon. Button from react-native-vector-icons as a replacement to <Icon>. As far as <Chip> goes, if you need the Chip to be pressable only around the icon, you can use <View> with flexDirection: 'row' to create your own Chip component

2. (Not recommended) You can ignore the validateDOMNesting warnings because they should only appear when the web app runs in development mode.

[utkarsh1097]

To fix the underlying issue, I would like to propose the following:

1. Let <Icon> render as a non-<button> if there are no onPress or similar callbacks defined.
2. In the case of <Button icon={...} />: Solving (1.) should solve the problem here too, and Buttons with clickable Icons wouldn't be allowed by validateDOMNesting.

• In the case of <Chip icon={...} />: This is a personal opinion but Chips should not be clickable by default, since a clickable Chip is behaviourally the same as a Button, especially since both Button and Chip allows users to lay out Icons within them. The Chip API can be rewritten in a way such that the existing render/visual behaviour remains the same, with the only change being that it ceases to be a Button. In that case, the underlying Icon can either be clickable or non-clickable.