[bug]: Toasts shows behind a dialog about ui

[fernandops26]

This worked for me, add a portal and adding z-[60], this works also for shadow roots:

import * as Portal from '@radix-ui/react-portal';


const ToastViewport = React.forwardRef<
  React.ElementRef<typeof ToastPrimitives.Viewport>,
  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport>
>(({ className, ...props }, ref) => (
  <Portal.Root className="fixed z-[60]">
    <ToastPrimitives.Viewport
      ref={ref}
      className={cn(
        'fixed top-0 z-[60] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]',
        className
      )}
      {...props}
    />
  </Portal.Root>
));

[ronishpaudel]

This worked for me, add a portal and adding z-[60], this works also for shadow roots:

import * as Portal from '@radix-ui/react-portal';


const ToastViewport = React.forwardRef<
  React.ElementRef<typeof ToastPrimitives.Viewport>,
  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport>
>(({ className, ...props }, ref) => (
  <Portal.Root className="fixed z-[60]">
    <ToastPrimitives.Viewport
      ref={ref}
      className={cn(
        'fixed top-0 z-[60] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]',
        className
      )}
      {...props}
    />
  </Portal.Root>
));

somehow this works for me but i am getting hydration error like of matching divs how can we fix it ?

[yassinebridi]

You are right.
I found a solution though, to use a custom container for the portals.

radix-ui/primitives#760 (comment)

This is how i'm using it now, but not sure if it's the cleanest way to do it:

export interface CreateDocumentProps {
  open: boolean;
  onOpenChange(open: boolean): void;
}
export const CreateDocument: React.FC<CreateDocumentProps> = ({
  open,
  onOpenChange,
}) => {
  const [container, setContainer] = React.useState(null);
  return (
    <>
      <Dialog open={open} onOpenChange={onOpenChange}>
        <DialogTrigger asChild>{children}</DialogTrigger>
        <DialogContent className="sm:max-w-[425px]" container={container}>
          content
        </DialogContent>
      </Dialog>
      <div ref={setContainer} />
    </>
  );
};

And this is the dialog content

const DialogContent = React.forwardRef<
  React.ElementRef<typeof DialogPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
>(({ className, children, container, ...props }, ref) => (
  <DialogPortal container={container}>
    <DialogOverlay />
    <DialogPrimitive.Content
      ref={ref}
      className={cn(
        "animate-in fade-in-90 slide-in-from-bottom-10 sm:zoom-in-90 sm:slide-in-from-bottom-0 fixed z-50 grid w-full scale-100 gap-4 bg-white p-6 opacity-100 sm:max-w-lg sm:rounded-lg",
        "dark:bg-slate-900",
        className
      )}
      {...props}
    >
      {children}
      <DialogPrimitive.Close className="absolute top-4 right-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-slate-100 dark:focus:ring-slate-400 dark:focus:ring-offset-slate-900 dark:data-[state=open]:bg-slate-800">
        <MyIcon name="X" className="h-4 w-4" />
        <span className="sr-only">Close</span>
      </DialogPrimitive.Close>
    </DialogPrimitive.Content>
  </DialogPortal>
));

[its-monotype]

Both AlertDialog and Toast have a z-index of 50. But AlertDialog is located below Toast in the HTML structure that's why Toast is showing behind AlertDialog.

[yassinebridi]

Still, i have put the toast provider bellow all components, like the docs suggested, as demonstrated in the codesandbox

[yassinebridi]

It's fixed though if you put a z-[60] in the toast viewport

[its-monotype]

You can check the HTML order of the Dialog and Toast in the dev tools. Probably Dialog always comes after Toast because of Dialog.Portal which is used here in DialogContent and always moves Dialog at the very bottom. So bumping z-index here on ToastViewport appears as the solution.

[Natan4Securitas]

This worked for me, add a portal and adding z-[60], this works also for shadow roots:

import * as Portal from '@radix-ui/react-portal';


const ToastViewport = React.forwardRef<
  React.ElementRef<typeof ToastPrimitives.Viewport>,
  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport>
>(({ className, ...props }, ref) => (
  <Portal.Root className="fixed z-[60]">
    <ToastPrimitives.Viewport
      ref={ref}
      className={cn(
        'fixed top-0 z-[60] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]',
        className
      )}
      {...props}
    />
  </Portal.Root>
));

This worked for me also, thanks a lot

[spenweb]

This worked for me, add a portal and adding z-[60], this works also for shadow roots:

import * as Portal from '@radix-ui/react-portal';


const ToastViewport = React.forwardRef<
  React.ElementRef<typeof ToastPrimitives.Viewport>,
  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport>
>(({ className, ...props }, ref) => (
  <Portal.Root className="fixed z-[60]">
    <ToastPrimitives.Viewport
      ref={ref}
      className={cn(
        'fixed top-0 z-[60] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]',
        className
      )}
      {...props}
    />
  </Portal.Root>
));

somehow this works for me but i am getting hydration error like of matching divs how can we fix it ?

I was able to get around the hydration error by wrapping the component in a custom ClientOnly wrapper component.

[augusto-kuki]

This worked for me, add a portal and adding z-[60], this works also for shadow roots:

import * as Portal from '@radix-ui/react-portal';


const ToastViewport = React.forwardRef<
  React.ElementRef<typeof ToastPrimitives.Viewport>,
  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport>
>(({ className, ...props }, ref) => (
  <Portal.Root className="fixed z-[60]">
    <ToastPrimitives.Viewport
      ref={ref}
      className={cn(
        'fixed top-0 z-[60] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]',
        className
      )}
      {...props}
    />
  </Portal.Root>
));

somehow this works for me but i am getting hydration error like of matching divs how can we fix it ?

This solution resolved my problem with Dialog and Sheet. Thanks!