Maximum Call Stack Size Exceeded Error with slotProps in Storybook for TextField Component

[MihirKotecha]

Steps to reproduce

1. Create a InputField component as shown below:

   import { TextField as MuiTextField, TextFieldProps as MuiTextFieldProps } from "@mui/material";
   import { ReactNode } from "react";
   
   export type InputFieldProps = MuiTextFieldProps & {
       id: string,
       children?: ReactNode;
       variant?: 'filled' | 'outlined' | 'standard';
   }
   
   export const InputField = ({ children, variant, ...props}: InputFieldProps) => {
       return (
           <MuiTextField {...props} variant={variant}>
               {children}
           </MuiTextField>
       )
   }

2. Create a Storybook story for this component using slotProps for a password field with a toggle feature, similar to the code below:

   import { StoryFn } from "@storybook/react";
   import { InputField, InputFieldProps } from "../elements/Form";
   import { IconButton, InputAdornment } from "@mui/material";
   import { useState } from "react";
   import { Visibility, VisibilityOff } from "@mui/icons-material";
    
   export default {
     title: 'Input/Password With Toggle Input',
     component: InputField,
   };
    
   const customInputSlot = ({
     showPassword = true,
     handleClickShowPassword,
   }: {
     showPassword: boolean;
     handleClickShowPassword: () => void;
   }) => {
     return {
       input: {
         type: showPassword ? 'text' : 'password',
         endAdornment: (
           <InputAdornment position="end">
             <IconButton
               aria-label={showPassword ? 'hide the password' : 'display the password'}
               onClick={handleClickShowPassword}
               edge="end"
             >
               {showPassword ? <VisibilityOff /> : <Visibility />}
             </IconButton>
           </InputAdornment>
         ),
       },
     };
   };
    
   const Template: StoryFn<InputFieldProps> = (args) => {
     const [showPassword, setShowPassword] = useState(false);
    
     const handleClickShowPassword = () => {
       setShowPassword(!showPassword);
     };
    
     return (
       <InputField
         slotProps={customInputSlot({ showPassword, handleClickShowPassword })}
         {...args}
       />
     );
   };
    
   export const PasswordWithToggle = Template.bind({});
   PasswordWithToggle.args = {
     label: 'Password',
     id: 'password-input',
   };

3. Run Storybook and load the story (PasswordWithToggle) to trigger the error.

4. Observe the error: Upon loading the Storybook page for the PasswordWithToggle, you will see the error: Maximum call stack size exceeded.

Current behavior

When loading the Storybook page for the PasswordWithToggle story, the following error is triggered:

RangeError: Maximum call stack size exceeded

This error occurs when trying to render the InputField component with the slotProps for the password toggle functionality. The component does not render properly, and the page fails to load as expected.

The issue seems related to the recursive nature of the component rendering process, as indicated by the "Maximum call stack size exceeded" error message. This prevents the component from being displayed correctly in Storybook.

I have tried adjusting the slotProps structure and ensuring proper usage of state in the story, but the error persists.

Expected behavior

The InputField component with the password toggle functionality should render properly in Storybook without throwing any errors.

• The password field should switch between "text" and "password" input types when the eye icon is clicked.
• The endAdornment should display a clickable IconButton with either the Visibility or VisibilityOff icon, depending on whether the password is being shown or hidden.
• The Storybook preview should render the InputField component correctly, with the password toggle functionality working as expected.
• There should be no errors related to the component rendering process, such as "Maximum call stack size exceeded".

Context

No response

Your environment

npx @mui/envinfo

    System:
    OS: Linux 5.15 Ubuntu 20.04.6 LTS (Focal Fossa)
  Binaries:
    Node: 22.13.0 - ~/.nvm/versions/node/v22.13.0/bin/node
    npm: 11.0.0 - ~/.nvm/versions/node/v22.13.0/bin/npm
    pnpm: Not Found
  Browsers:
    Chrome: 132.0.6834.110
  npmPackages:
    @emotion/react: ^11.14.0 => 11.14.0 
    @emotion/styled: ^11.14.0 => 11.14.0 
    @mui/core-downloads-tracker:  6.4.1 
    @mui/icons-material: ^6.4.1 => 6.4.1 
    @mui/material: ^6.4.1 => 6.4.1 
    @mui/private-theming:  6.4.1 
    @mui/styled-engine:  6.4.0 
    @mui/system:  6.4.1 
    @mui/types:  7.2.21 
    @mui/utils:  6.4.1 
    @types/react: ^18.3.18 => 18.3.18 
    react: ^18.3.1 => 18.3.1 
    react-dom: ^18.3.1 => 18.3.1 
    typescript: ~5.6.2 => 5.6.3 

Search keywords: TextField, React Storybook

[aarongarciah]

Hi @MihirKotecha, thanks for the report. Looks like the issue has nothing to do with Storybook. I suggest to update your code and avoid passing a new object to slotProps on each render. One way of achieving it is using React.useMemo, see this example: https://stackblitz.com/edit/vitejs-vite-hre9einv?file=src%2FApp.tsx

Let me know if this works in your case. If not, you'd need to provide a reproduction so we can take a look.

[MihirKotecha]

https://stackblitz.com/edit/vitejs-vite-88t3tdp4?file=src%2Fstories%2FPasswordWithToggle.stories.tsx

Hi @aarongarciah, thnx for the response. I tried using useMemo hook but the issue still seems to persist. I have reproduced the issue in the above link. You can run npm run storybook to see the error. Also, inside the src/stories/PasswordWithToggle.stories.tsx file inside comments you can find the code where I have used the useMemo hook.

Please lmk if there is anything else needed from my side. Thnx again

[mj12albert]

I think it's both a usage issue and SB issue 🤔

@MihirKotecha Here's what worked for me: https://codesandbox.io/p/sandbox/happy-swanson-6xnxp5?file=%2Fsrc%2FApp.js%3A46%2C1

Create a Storybook story for this component using slotProps for a password field with a toggle feature, similar to the code below:

In your real application, do you intend to have a InputField component that can be toggled between being a password field and normal text field with a prop? and have a toggle in the SB controls to demonstrate this?

If so, I would suggest making two separate components and use them in your application and SB separately. In the case of the SB my understanding is that it's mostly for toggling between simple props like primary | secondary, and less so for switching between different large and possibly complex slotProps ~

[mj12albert]

https://mui.com/material-ui/react-text-field/#input-adornments

I suppose it would be quite easy to encounter this issue if you tried to do a simple/"direct" conversion of this password field example to slotProps 🤔