fix Toast stacking

packages/core/src/common/errors.ts

@@ -40,6 +40,8 @@ export const RANGESLIDER_NULL_VALUE = `${ns} <RangeSlider> value prop must be an
 export const TABS_FIRST_CHILD = `${ns} First child of <Tabs> component should be a <TabList>`;
 export const TABS_MISMATCH = `${ns} Number of <Tab> components should equal number of <TabPanel> components`;
 
+export const TOASTER_INLINE_WARNING = `${ns} Toaster.create() ignores inline prop as it always creates a new element`;
+
 export const WARNING_DIALOG_NO_HEADER_ICON = `${ns} Warning: Dialog iconName prop is ignored if title prop is omitted`;
 export const WARNING_DIALOG_NO_HEADER_CLOSE_BUTTON =
     `${ns} Warning: Dialog isCloseButtonShown prop is ignored if title prop is omitted`;

packages/core/src/components/toast/_toast.scss

@@ -202,7 +202,9 @@ $toast-margin: $pt-grid-size * 1.5 !default;
   display: flex;
   align-items: flex-start;
 
-  position: relative;
+  // toasts rely on relative positioning for stacking; override inline overlay styles (#367)
+  // stylelint-disable-next-line declaration-no-important
+  position: relative !important;
   margin: $toast-margin 0 0;
   border-radius: $pt-border-radius;
   box-shadow: $pt-elevation-shadow-3;

packages/core/src/components/toast/toaster.tsx

@@ -12,10 +12,11 @@ import * as ReactDOM from "react-dom";
 
 import { AbstractComponent } from "../../common/abstractComponent";
 import * as Classes from "../../common/classes";
+import { TOASTER_INLINE_WARNING } from "../../common/errors";
 import { ESCAPE } from "../../common/keys";
 import { Position } from "../../common/position";
 import { IProps } from "../../common/props";
-import { safeInvoke } from "../../common/utils";
+import { safeInvoke, shallowClone } from "../../common/utils";
 import { Overlay } from "../overlay/overlay";
 import { IToastProps, Toast } from "./toast";
 
@@ -59,6 +60,9 @@ export interface IToasterProps extends IProps {
     /**
      * Whether the toaster should be rendered inline or into a new element on `document.body`.
      * If `true`, then positioning will be relative to the parent element.
+     *
+     * This prop is ignored by `Toaster.create()` as that method always appends a new element
+     * to the container.
      * @default false
      */
     inline?: boolean;
@@ -89,6 +93,9 @@ export class Toaster extends AbstractComponent<IToasterProps, IToasterState> imp
      * The `Toaster` will be rendered into a new element appended to the given container.
      */
     public static create(props?: IToasterProps, container = document.body): IToaster {
+        if (props != null && props.inline != null) {
+            console.warn(TOASTER_INLINE_WARNING);
+        }
         const containerElement = document.createElement("div");
         container.appendChild(containerElement);
         return ReactDOM.render(<Toaster {...props} inline /> , containerElement) as Toaster;
@@ -102,17 +109,15 @@ export class Toaster extends AbstractComponent<IToasterProps, IToasterState> imp
     private toastId = 0;
 
     public show(props: IToastProps) {
-        const options = props as IToastOptions;
-        options.key = `toast-${this.toastId++}`;
+        const options = this.createToastOptions(props);
         this.setState((prevState) => ({
             toasts: [options, ...prevState.toasts],
         }));
         return options.key;
     }
 
     public update(key: string, props: IToastProps) {
-        const options = props as IToastOptions;
-        options.key = key;
+        const options = this.createToastOptions(props, key);
         this.setState((prevState) => ({
             toasts: prevState.toasts.map((t) => t.key === key ? options : t),
         }));
@@ -171,6 +176,13 @@ export class Toaster extends AbstractComponent<IToasterProps, IToasterState> imp
         return <Toast {...toast} onDismiss={this.getDismissHandler(toast)} />;
     }
 
+    private createToastOptions(props: IToastProps, key = `toast-${this.toastId++}`) {
+        // clone the object before adding the key prop to avoid leaking the mutation
+        const options = shallowClone<IToastOptions>(props);
+        options.key = key;
+        return options;
+    }
+
     private getPositionClasses() {
         const positions = Position[this.props.position].split("_");
         // NOTE that there is no -center class because that's the default style

packages/core/test/toast/toasterTests.ts

@@ -107,4 +107,18 @@ describe("Toaster", () => {
         toaster.clear();
         assert.isTrue(onDismiss.calledOnce, "onDismiss not called");
     });
+
+    it("reusing props object does not produce React errors", () => {
+        const errorSpy = sinon.spy(console, "error");
+        // if Toaster doesn't clone the props object before injecting key then there will be a
+        // React error that both toasts have the same key, because both instances refer to the
+        // same object.
+        const toast = { message: "repeat" };
+        toaster.show(toast);
+        toaster.show(toast);
+        assert.isFalse(
+            errorSpy.calledWithMatch("two children with the same key"),
+            "mutation side effect!",
+        );
+    });
 });