Snackbar is not showing over the Dialog but its showing behind the Dialog

[s-prakash]

• [x] This is a v1.x issue (v0.x is no longer maintained).
• [x] I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

The Snackbar should appear above the dialog component.

Current Behavior

Snackbar is rendering under the dialog component, on the screen. So unable to use it with any MUI dialog components.

Have verified the z-index of both component, dialog having z-index 1300 and Snackbar having 1400. But the issue is still happening. have attached the screen shot of it, Please check it.

Steps to Reproduce (for bugs)

1. Use dialog component in your app
2. Try to show a Snackbar above the dialog.

Context

Want to show server response message to user while he submit the form.

Your Environment

Tech	Version
Material-UI	v1.3.0
React	16.4.1
browser	Google Chrome Version 61.0.3163.79 (Official Build) (64-bit)
etc	OS: Windows 7 64 bit

[oliviertassinari]

The snackbar is supposed to render above the dialog per: https://github.com/mui-org/material-ui/blob/b3564a767135b933146f7fe73e3a34b14950c782/packages/material-ui/src/styles/zIndex.js#L3-L10

@s-prakash Do you have a reproduction?

[oliviertassinari]

@mbrookes We can always change the default z-index values, but I think that we should enable users to use the current values, it should be working.

---

The issue has been closed because it does not conform to our issue requirements. Please provide a full reproduction test case. This would help a lot 👷 . A live example would be perfect. This codesandbox.io template may be a good starting point. Thank you!

[s-prakash]

Yes I have, but I don't know how to attach it here exactly.

But nothing much, Just used a dialog modal and tried to show a snack bar on top of it. That's all.

Can I share the dependency list which are used in the project package.json ? is that might help ?

Thanks Prakash

[s-prakash]

Thanks @oliviertassinari for giving this template and I like the Codesandox to use. I started trying with this template by adding the code to it. Once I reproduced the issue I will share it here.

Thanks !!!

[s-prakash]

Sorry I unable to give you the code to reproduce it, and I just avoided of using snackbar over dialog modal, as of now.

Can I close this issue ? because its not coming while tried using that codesandbox template example given by @oliviertassinari.

[s-prakash]

Just for a info These are my package.json dependencies; { "devDependencies": { "babel-core": "^6.26.0", "babel-eslint": "^8.2.1", "babel-jest": "^22.4.3", "babel-loader": "^7.1.2", "babel-plugin-transform-runtime": "^6.23.0", "babel-polyfill": "^6.26.0", "babel-preset-env": "^1.6.1", "babel-preset-react": "^6.24.1", "babel-preset-stage-0": "^6.24.1", "babel-runtime": "^6.26.0", "body-parser": "^1.18.2", "chai": "^4.1.2", "chai-string": "^1.4.0", "chalk": "^2.3.0", "clean-webpack-plugin": "^0.1.18", "copy-webpack-plugin": "^4.3.1", "css-loader": "^0.28.11", "enzyme": "^3.3.0", "enzyme-adapter-react-16": "^1.1.1", "eslint": "^4.19.1", "eslint-plugin-prettier": "^2.6.0", "eslint-plugin-react": "^7.6.1", "express": "^4.16.2", "express-fileupload": "^0.4.0", "express-session": "^1.15.6", "file-loader": "^1.1.6", "fs-jetpack": "^1.2.0", "html-webpack-plugin": "^3.1.0", "husky": "^0.14.3", "ignore-styles": "^5.0.1", "imagemin": "^5.3.1", "imagemin-gifsicle": "^5.2.0", "imagemin-mozjpeg": "^7.0.0", "imagemin-pngout": "^3.0.0", "imagemin-svgo": "^6.0.0", "imagemin-webp": "^4.1.0", "img-loader": "^3.0.0", "jest": "^22.4.3", "jsdoc-to-markdown": "^4.0.1", "lint-staged": "^7.0.0", "morgan": "^1.9.0", "nodemon": "^1.17.2", "prettier": "^1.13.2", "react-addons-test-utils": "^15.6.2", "react-dom": "^16.4.0", "react-hot-loader": "^4.0.0", "react-test-renderer": "^16.3.0", "redux-logger": "^3.0.6", "redux-mock-store": "^1.5.1", "session-file-store": "^1.2.0", "sinon": "^4.5.0", "style-loader": "^0.20.1", "uglifyjs-webpack-plugin": "^1.2.4", "webpack": "^4.10.0", "webpack-dev-server": "^3.1.0", "webpack-md5-hash": "^0.0.6", "webpack-node-externals": "^1.6.0" }, "dependencies": { "@material-ui/core": "^1.3.0", "@material-ui/icons": "^1.0.0", "aphrodite": "^2.2.2", "isomorphic-fetch": "^2.2.1", "mobile-detect": "^1.4.2", "moment": "^2.22.2", "normalizr": "^3.2.4", "prop-types": "^15.6.2", "rc-collapse": "^1.8.0", "react": "^16.4.1", "react-custom-scrollbars": "^4.2.1", "react-datepicker": "^1.3.0", "react-redux": "^5.0.6", "react-router": "^3.2.0", "react-router-redux": "^4.0.8", "react-with-styles": "^3.1.0", "react-with-styles-interface-aphrodite": "^5.0.0", "redux": "^3.7.2", "redux-beacon": "^1.2.1", "redux-thunk": "^2.3.0", "store": "^2.0.12", "uuid": "^3.3.0" } }

[s-prakash]

Thanks @oliviertassinari

[afilp]

@oliviertassinari

I see where the problem is, and I have the same problem:

The z-index of the snackbar is indeed 1400, while the modal's is 1300:

But, the modal is rendered outside the root div of react, at the end of the HTML, while the snackbar is inside the react's main div (which comes before):

So, in that case the z-index is irrelevant because they have different parent elements.

What is the solution on this?

Thanks a lot and sorry for commenting on a closed issue, but this is exactly the issue that has the problem.

[oliviertassinari]

@afilp Do you have a reproduction?

[orenku]

I face the same problem- Snackbars are used to provide async information to the user. They should always appear on top of any modal/drawer on the screen. @afilp has identified the source of the problem correctly

[aflip]

Folks, The person who raised the issue is a-f-i-l-p, my username is a-f-l-i-p, and while its fun to be tagged into a completely random bug discussion, I'd appreciate it if you could tag the right person!

Cheers

AFLIP not AFILP

[oliviertassinari]

@orenku Do you have a reproduction?

import React from "react";
import Snackbar from "@material-ui/core/Snackbar";
import DialogTitle from "@material-ui/core/DialogTitle";
import Dialog from "@material-ui/core/Dialog";

export default function SimpleDialogDemo() {
  return (
    <div>
      <Snackbar open message="Note archived" />
      <Dialog aria-labelledby="simple-dialog-title" open>
        <DialogTitle id="simple-dialog-title">Set backup account</DialogTitle>
      </Dialog>
    </div>
  );
}

renders OK

https://codesandbox.io/s/material-demo-6jt1m

[nicolasc38]

@oliviertassinari

I see where the problem is, and I have the same problem:

The z-index of the snackbar is indeed 1400, while the modal's is 1300:

But, the modal is rendered outside the root div of react, at the end of the HTML, while the snackbar is inside the react's main div (which comes before):

So, in that case the z-index is irrelevant because they have different parent elements.

What is the solution on this?

Thanks a lot and sorry for commenting on a closed issue, but this is exactly the issue that has the problem.

Hello,

I have exactly the same issue and can't find a way to settle it or a work around. I ran into this after building a new react calendar app and trying to integrate it in my main APP.

In my new react app snackbars appears on top, then in my main app they appear below, i can't figure why ...

Did you find a way to settle this?

Thank you,

Nicolas

[oliviertassinari]

@nicolasc38 The issue was closed because we didn't get a reproduction.

[nicolasc38]

@oliviertassinari thank you for the quick reply, i'll do it another way :)

[jsholzer]

I was running in to this same issue while trying to build a global snackbar/toast component for my app.

I was able to use the component to work around this issue. Portal will cause the snackbar to be rendered in the "right" place within the DOM, so that the z-index will properly display it on top of the modal backdrop

<Portal>
  <Snackback {...snackbarProps} />
</Portal>

[chkilel]

Thanks @afilp for the problem description, and for @jsholzer for the hint, this helped me to find the a solution, hope the code below help.

import { useState } from "react";
import { createPortal } from "react-dom";
import { Snackbar } from "@material-ui/core";
import { Alert } from "@material-ui/lab";

// SuperSnackbar is a solution to the problem of the snackbar not being
// displayed when the dialog is open. we render the snackbar using a portal
const SuperSnackbar = ({ message, isOpen, onClose, severity }) => {
  if (!isOpen) return null;
  return createPortal(
    <Snackbar
      anchorOrigin={{ vertical: "top", horizontal: "center" }}
      open={isOpen}
      autoHideDuration={6000}
      onClose={onClose}
    >
      <Alert onClose={onClose} severity={severity}>
        {message}
      </Alert>
    </Snackbar>,
    document.body
  );
};

function Component() {
  const [snackbar, setSnackbar] = useState(false);

  return (
    <div className="component">
      <button
        onClick={() =>
          setSnackbar({
            severity: "success",
            message: `The snackbar is now open.`,
            open: true,
          })
        }
      >
        Show snackbar
      </button>
      {snackbar && (
        <SuperSnackbar
          isOpen={snackbar.open}
          onClose={() => setSnackbar(null)}
          message={snackbar.message}
          severity={snackbar.severity}
        />
      )}
    </div>
  );
}

export default Component;

[aflip]

i am once again reminding you that @aflip and @afilp are different people. i am from the FLIP family and they are from the FILP family of spellings. happy bug hunting all.

[T04435]

I had the same issue, I think is not a problem from MUI but users.

If you have the <Snackbar /> in a child component it won't matter which z-index you add, it will show behind any parent component that also has pos: absolute, that is how css absolute works parents will be above always.

So solution: Move it out of the nested DOM element with a <Portal /> as per @jsholzer comment https://github.com/mui/material-ui/issues/12044#issuecomment-1095060725

In case mui wants to change its behaviours so always in on top of anything <Portal>...currentSnackbarCode</Portal>

Hope that helps 👍

[Hassaan0]

I was running in to this same issue while trying to build a global snackbar/toast component for my app.

I was able to use the component to work around this issue. Portal will cause the snackbar to be rendered in the "right" place within the DOM, so that the z-index will properly display it on top of the modal backdrop

<Portal>
  <Snackback {...snackbarProps} />
</Portal>

THANKS 💃🥳🥳 After searching for days finally this solution works for me

[kylane]

Sorry to comment on this so late - however I think there may be an accessibility issue around snackbars being launched outside of a currently open dialog - in that, if I create a snackbar with a role of alert, and/or an aria-live of assertive - it is never read out to screen readers as its being blocked by the dialog. Its something Im currently trying to find a way around, but will mean some large refactors - but I commented here as the visual level appears to be solved, but the screen reader solution isnt.

Is there potentially an option to render the snackbar given a ref like a dialog?

[bpappin]

This is replaceable. Its happens when you have two scaffolds, one in the main app and one in the dialog. Your snackbar is being anchored on the one in the main app that the dialog is now covering. To get the snackbar above the dialog, you need to anchor it to the dialog itself.

[ecancil]

Six years later it seems this is still happening. Basic dialog, and basic snackbar. Snackbar shows under the dialog....