Snackbar elements not clickable since updating to Material-UI 4.12

[daviduzumeri]

Expected Behavior

If I put a button in the snackbar and click on it, the button should be clickable.

Current Behavior

Clicking on the button instead is overtaken by whatever's in the layer below (so for instance if the snackbar renders over a row in a list, the list row will be clicked rather than the button on the snackbar).

Steps to Reproduce

Link: https://codesandbox.io/s/mui-412-action-broken-u5019?file=/MessageButtons.js

1. Click on "DEFAULT"
2. Click on "My Action"
3. Nothing happens.

If you go to the material-ui import on the left and switch it back to 4.11.4, it works.

Context

I would like to have a snackbar notification with buttons I can click on. :)

Your Environment

Tech	Version
Notistack	v1.0.9
React	v17.0.2
Browser	all

[longzheng]

Can confirm also there seems to be an issue with the stacking behaviour

material-ui/[email protected]

material-ui/[email protected]

[uN1ck]

Same problem with:

TECH	VERSION
Notistack	1.0.9
material-ui/core	4.12.1
react	17.0.2
Browser	Chrome

UPD 1: there IS problem with Material-UI 4.12

I don't think there is problem in Material-UI 4.12. In my case it's just stopped working. Idk why, because i have not changed any dependencies versions.
My package.json:

{
  "license": "(MIT OR Apache-2.0)",
  "author": "Genseck",
  "name": "si-console-ui",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "build": "cross-env NODE_ENV=production webpack --config ./config/webpack.prod.js",
    "start:dev": "cross-env NODE_ENV=development webpack serve --progress --config ./config/webpack.dev.js"
  },
  "dependencies": {
    "@material-ui/core": "4.11.2",
    "@material-ui/icons": "^4.11.2",
    "@material-ui/lab": "^4.0.0-alpha.58",
    "@reduxjs/toolkit": "^1.5.1",
    "@types/lodash": "^4.14.170",
    "@types/react": "^17.0.3",
    "@types/react-dom": "^17.0.3",
    "clsx": "^1.1.1",
    "eslint-plugin-header": "^3.1.1",
    "eslint-plugin-react-hooks": "^4.2.0",
    "lodash": "^4.17.21",
    "monaco-editor-webpack-plugin": "^3.0.1",
    "notistack": "^1.0.9",
    "react": "^17.0.2",
    "react-confirm-alert": "^2.7.0",
    "react-dom": "^17.0.2",
    "react-monaco-editor": "^0.43.0",
    "react-redux": "^7.2.3",
    "react-router-dom": "^5.2.0"
  },
  "devDependencies": {
    "@babel/core": "^7.14.6",
    "@babel/plugin-transform-runtime": "^7.13.10",
    "@babel/preset-env": "^7.14.7",
    "@babel/preset-react": "^7.12.13",
    "@babel/preset-typescript": "^7.13.0",
    "@fortawesome/fontawesome-free": "^5.15.3",
    "@openapitools/openapi-generator-cli": "^2.2.5",
    "@types/react-redux": "^7.1.16",
    "@types/react-router-dom": "^5.1.7",
    "@typescript-eslint/eslint-plugin": "^4.19.0",
    "@typescript-eslint/parser": "^4.19.0",
    "babel-eslint": "^10.1.0",
    "babel-loader": "^8.2.2",
    "brotli-webpack-plugin": "^1.1.0",
    "clean-webpack-plugin": "^3.0.0",
    "copy-webpack-plugin": "^8.1.1",
    "cross-env": "^7.0.3",
    "css-loader": "^5.1.3",
    "css-minimizer-webpack-plugin": "^3.0.1",
    "eslint": "^7.24.0",
    "eslint-plugin-json": "^2.1.2",
    "eslint-plugin-react": "^7.23.0",
    "eslint-webpack-plugin": "^2.5.4",
    "file-loader": "^6.2.0",
    "html-webpack-plugin": "^5.3.1",
    "immutable": "^4.0.0-rc.12",
    "mini-css-extract-plugin": "^1.6.0",
    "moment": "^2.29.1",
    "react-cookie": "^4.0.3",
    "react-lifecycles-compat": "^3.0.4",
    "style-loader": "^2.0.0",
    "terser-webpack-plugin": "^5.1.3",
    "ts-loader": "^8.0.18",
    "typescript-tslint-plugin": "^1.0.1",
    "url-loader": "^4.1.1",
    "webpack": "^5.40.0",
    "webpack-bundle-analyzer": "^4.4.2",
    "webpack-cli": "^4.7.2",
    "webpack-dev-server": "^3.11.2",
    "webpack-merge": "^5.8.0"
  },
  "proxy": "http://localhost:8080"
}

UPD 1:
"@material-ui/lab": "^4.0.0-alpha.58" implictly requires "@material-ui/core": "4.12.0" and newer version. There is no way to install 4.11.* with @material-ui/lab installed which I have found.

[ggascoigne]

I think that this is the cause #394

[ShawLocke]

We recently upgrade material-ui to v4.12 and notistack to v1.0.9. And it is the same as @daviduzumeri described.

[iamhosseindhv]

This isn't a bug, as I've described here, there are a couple solutions:

• If you're using MUI < v4.12.0, use npm i notistack or npm i notistack@latest

• If you're using MUI >= v4.12.0, use npm i notistack@next. Or you could go with this suggested solution Use deprecated class cause the snackbar not clickable #394 (comment) (recommended)

[Methuselah96]

@iamhosseindhv Would you be open to tightening the version range for the peer dependency on @material-ui/core to reflect that then? It's quite a bad experience to upgrade material-ui to the next minor version and have notistack stop working.