Button in Tab component triggers maximum update depth exceeded warning
#6 774 ouverte le 1 mai 2023
Description
Creating a function component that returns a button and tab component results in a "maximum update depth exceeded" warning.
This applies to function or class components.
Also noticed this behavior when using children props.
Expected Behavior
We can return a function component that has a tab with a button in it.
Actual Behavior
Functions or class components that return a button and tab trigger "Maximum update depth exceeded warnings."
App.js
import { Button, Grommet, Tab, Tabs, Text } from 'grommet'
const BadButton = (props) => {
return (
<Tab title="Bad button">
<Text>
This button will cause a "Maximum update depth exceeded warning"
</Text>
<Button label="Bad Button"/>
</Tab>
);
}
function App() {
return (
<Grommet full>
<Tabs>
<BadButton/>
</Tabs>
</Grommet>
);
}
export default App;
Work arounds for this is to place the button in its own function component or to move Tab in the BadButton function to App.
Steps to Reproduce
Open the developer tools and view the console output. When the bad button tab is active the "Maximum update depth exceeded warning" is printed. When the good button tab is active no warnings or errors are printed.
Your Environment
- Grommet version: 2.32.0
- Browser Name and version: Safari 16.3
- Operating System and version (desktop or mobile): macOS Ventura 13.2.1