[ButtonBase] Cannot read properties of null (reading 'pulsate') React v18

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

Applying the autoFocus prop to a Button component throws an error. This happens when using React v18, everything works as expected in React v17.

Uncaught TypeError: Cannot read properties of null (reading 'pulsate')
    at ButtonBase.js:147:25
    at commitHookEffectListMount (react-dom.development.js:22912:26)
    at commitPassiveMountOnFiber (react-dom.development.js:24642:13)
    at commitPassiveMountEffects_complete (react-dom.development.js:24606:9)
    at commitPassiveMountEffects_begin (react-dom.development.js:24593:7)
    at commitPassiveMountEffects (react-dom.development.js:24581:3)
    at flushPassiveEffectsImpl (react-dom.development.js:26700:3)
    at flushPassiveEffects (react-dom.development.js:26653:14)
    at commitRootImpl (react-dom.development.js:26604:5)
    at commitRoot (react-dom.development.js:26380:5)

I found two old issues with the same error (link | link), but they do not seem to be related.

Expected behavior 🤔

The component should not throw an error.

Steps to reproduce 🕹

Steps:

1. Use React v18
2. Apply the autoFocus prop to a Button component
3. 💥

• StackBlitz with Vite & React v18 (remove autoFocus and reload to see the Button displayed as expected)
• StackBlitz with Vite & React v17

I have reproduced this locally in Chrome v97. I have also reproduced this locally with a Webpack-based build.

Context 🔦

No response

Your environment 🌎

`npx @mui/envinfo`

  System:
    OS: Linux undefined
  Binaries:
    Node: 14.16.0 - /usr/local/bin/node
    Yarn: 1.22.10 - /bin/yarn
    npm: 7.17.0 - /bin/npm
  Browsers:
    Chrome: Not Found
    Firefox: Not Found
  npmPackages:
    @emotion/react: ^11.7.1 => 11.7.1 
    @emotion/styled: ^11.6.0 => 11.6.0 
    @mui/base:  5.0.0-alpha.67 
    @mui/material: ^5.4.0 => 5.4.0 
    @mui/private-theming:  5.3.0 
    @mui/styled-engine:  5.3.0 
    @mui/system:  5.4.0 
    @mui/types:  7.1.0 
    @mui/utils:  5.3.0 
    @types/react:  17.0.39 
    react: 18.0.0-rc.0 => 18.0.0-rc.0 
    react-dom: 18.0.0-rc.0 => 18.0.0-rc.0

[remacr]

This is really an issue when upgrading to React 18, and moving to MUI v5 is not an option right now for an autoFocus problem.

"@material-ui/core": "4.12.4",
"react": "18.2.0",

import { Button } from '@material-ui/core'
...
<Button color="primary" fullWidth type="submit" variant="contained">
  Ok
</Button>

This is another way to reproduce the issue and is not related to explicitly adding the autoFocus attribute, when a Button is part of a form and the user hits enter, the same pulstate error appears.

[frkgrall]

For those like me who’re still stuck on v4, you still can use refs (And keepmounted if the problem occurs in a Dialog)

import {
  Button,
  Dialog,
  DialogActions,
  DialogContent,
  DialogContentText,
  DialogTitle,
} from '@material-ui/core'
import { Warning } from '@material-ui/icons'
import React, {
  createContext,
  useContext,
  useEffect,
  useMemo,
  useRef,
  useState,
} from 'react'
import { useTranslation } from 'react-i18next'

const AlertContext = createContext()

function AlertProvider({ children }) {
  const { t } = useTranslation()
  const [open, setOpen] = useState(false)
  const [alert, setAlert] = useState('')
  const buttonRef = useRef()

  const handleClose = () => {
    setOpen(false)
    setAlert('')
  }

  const popAlert = (newAlert = '') => {
    setAlert(newAlert)
    setOpen(true)
  }

  useEffect(() => {
    if (open) {
      buttonRef.current.focus()
    }
  }, [open])

  const values = useMemo(
    () => ({
      popAlert,
    }),
    [],
  )

  return (
    <AlertContext.Provider value={values}>
      {children}
      <Dialog
        keepMounted
        open={open}
        aria-labelledby="alert-dialog-title"
        aria-describedby="alert-dialog-description"
      >
        <DialogTitle id="alert-dialog-title">
          <Warning />
          {t('warning')}
        </DialogTitle>
        <DialogContent>
          <DialogContentText id="alert-dialog-description">
            {alert}
          </DialogContentText>
        </DialogContent>
        <DialogActions>
          <Button ref={buttonRef} onClick={handleClose}>
            {t('common.confirm.dialog.button.ok')}
          </Button>
        </DialogActions>
      </Dialog>
    </AlertContext.Provider>
  )
}

const useAlert = () => {
  const context = useContext(AlertContext)
  if (context === undefined) {
    throw new Error('useAlert must be used within a AlertProvider')
  }
  return context
}

export { AlertProvider, useAlert }