Toasts escaping parent container

[maclockard]

Environment

• Package version(s):

{
    "@blueprintjs/core": "3.39.0",
    "react": "16.14.0",
    "react-dom": "16.14.0"
}

• Operating System: macOs
• Browser name and version:
  • Chrome 88
  • Firefox 85

Code Sandbox

https://codesandbox.io/s/dank-bush-b2wur

import "./styles.css";
import "@blueprintjs/core/lib/css/blueprint.css";
import { Toaster, Intent } from "@blueprintjs/core";
import React, { useRef, useLayoutEffect } from "react";

export default function App() {
  const toasterRef = useRef<Toaster>(null);

  useLayoutEffect(() => {
    const toastId = toasterRef.current?.show({
      message: "out of bounds toast",
      intent: Intent.DANGER,
      timeout: 0
    });
    return () => {
      toasterRef.current?.dismiss(toastId);
    };
  }, []);

  return (
    <div className="App">
      <Toaster ref={toasterRef} usePortal={false} />
      <div className="ToasterContainer">
        Toasts should appear here{" "}
        <button
          onClick={() =>
            toasterRef.current?.show({
              message: "out of bounds toast"
            })
          }
        >
          procure toast
        </button>
      </div>
    </div>
  );
}

.App {
  font-family: sans-serif;
}

.ToasterContainer {
  position: relative;
  width: 300px;
  height: 300px;
  border: 1px solid green;
  margin-top: 200px;
}

Steps to reproduce

1. Create a Toaster component with usePortal={false}.
2. Set parent container's position to relative.
3. Procure toast

Actual behavior

Procured toasts appear at the top of the page.

Expected behavior

Procured toasts appear at the top of the parent container. Related to #3039

Possible solution

I believe part of the issue here is that the toast container uses position: fixed;. This makes it so that setting the containing parent's position to relative doesn't contain the toasts. Possibly using this might work: https://www.gravitywell.co.uk/insights/css-tip-fixed-positioning-inside-a-relative-container/ ?

[adidahiya]

That suggestion in the link did not work. But I'm pretty sure fixed is the wrong positioning for usePortal={false}, and we just haven't hit this problem because no one was really using that option. I propose changing it to absolute here: #4555

[maclockard]

awesome! thank you @adidahiya