[BUG] - Toast is hidden under drawer / modal

[oferitz-apex]

HeroUI Version

2.7.2

Describe the bug

Toast notifications cannot be used with Drawer components since the drawer mask and drawer itself are always rendered above the toast messages. I've tried applying a larger z-index, but this doesn't solve the issue - the drawer still overlays the toast.

code to reproduce:

    <ToastProvider
        placement="bottom-left"
        toastOffset={30}
        toastProps={{
          shouldShowTimeoutProgess: true,
          radius: 'lg',
          classNames: {
            base: 'z-[1000]'
          }
        }}
      />



import {
  Button,
  Drawer,
  DrawerBody,
  DrawerContent,
  addToast,
  useDisclosure
} from '@heroui/react'

export default function SandboxPage() {
  const { isOpen, onOpen, onOpenChange } = useDisclosure()
  return (
    <div className="p-8">
      <Drawer isOpen={isOpen} onOpenChange={onOpenChange}>
        <DrawerContent>
          <DrawerBody className="flex flex-col justify-center items-center">
            <Button
              onPress={() =>
                addToast({
                  title: 'Hello World',
                  description: 'This is a toast message',
                  color: 'success'
                })
              }
            >
              Add Toast
            </Button>
          </DrawerBody>
        </DrawerContent>
      </Drawer>
      <Button onPress={onOpen}>Open Drawer</Button>
    </div>
  )
}

Your Example Website or App

No response

Steps to Reproduce the Bug or Issue

1. Click on Open drawer
2. Click on Add toast

Expected behavior

The Toast should be always visible and on top of any other component

Screenshots or Videos

Operating System Version

macOS

Browser

Chrome

[linear]

ENG-2130 [BUG] - Toast is hidden under drawer

[dimitrov9]

This is true when invoking the toast from a modal as well.

[GVALFER]

Yes, bug here as well.
if any modal is open, the toast is hidden behind the modal

[aydinws]

For now, I solved it like this.

addToast({
title: "Giriş bildirişi",
description: response.data.status.message,
classNames: {
base: "!z-[50] bg-default-100 dark:bg-default-100 text-default-700 dark:text-default-700",
title: "text-default-700 dark:text-default-700",
closeButton: "opacity-100 absolute right-4 top-1/2 -translate-y-1/2",
},
color: 'warning',
variant: 'default',
timeout: 5000,
})

<Modal
isOpen={isOpen}
backdrop={'blur'}
onClose={onClose}
classNames={{
backdrop: "!z-[40]",
wrapper: "!z-[40]",
}}
placement="center"
isDismissable={false}
>

[pavitra-infocusp]

No matter what I do, the toast doesn't appear on top :(

[macci001]

Update: The PR to fix this issue is up, and coming version v2.7.5 will not have this issues.

[pavitra-infocusp]

Thanks @macci001 !!

[oferitz-apex]

@macci001 Why it didn't got into 2.7.4?