fix: rendering of ReactNode descriptions (#387)

emilkowalski · Apr 10, 2024 · 6c51bc8 · 6c51bc8
1 parent a869bd5
commit 6c51bc8
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 2 deletions.
diff --git a/src/index.tsx b/src/index.tsx
@@ -403,8 +403,12 @@ const Toast = (props: ToastProps) => {
                   classNames?.description,
                   toast?.classNames?.description,
                 )}
-                dangerouslySetInnerHTML={sanitizeHTML(toast.description as string)}
-              ></div>
+                dangerouslySetInnerHTML={
+                  typeof toast.description === 'string' ? sanitizeHTML(toast.description as string) : undefined
+                }
+              >
+                {typeof toast.description === 'object' ? toast.description : null}
+              </div>
             ) : null}
           </div>
           {React.isValidElement(toast.cancel) ? (

diff --git a/test/src/app/page.tsx b/test/src/app/page.tsx
@@ -155,6 +155,20 @@ export default function Home({ searchParams }: any) {
       >
         Updated Toast
       </button>
+      <button
+        data-testid="string-description"
+        className="button"
+        onClick={() => toast('Custom Description', { description: 'string description' })}
+      >
+        String Description
+      </button>
+      <button
+        data-testid="react-node-description"
+        className="button"
+        onClick={() => toast('Custom Description', { description: <div>This is my custom ReactNode description</div> })}
+      >
+        ReactNode Description
+      </button>
       {showAutoClose ? <div data-testid="auto-close-el" /> : null}
       {showDismiss ? <div data-testid="dismiss-el" /> : null}
       <Toaster

diff --git a/test/tests/basic.spec.ts b/test/tests/basic.spec.ts
@@ -179,4 +179,14 @@ test.describe('Basic functionality', () => {
 
     await expect(button).toHaveCSS('background-color', 'rgb(219, 239, 255)');
   });
+
+  test('string description is rendered', async ({ page }) => {
+    await page.getByTestId('string-description').click();
+    await expect(page.getByText('string description')).toHaveCount(1);
+  });
+
+  test('ReactNode description is rendered', async ({ page }) => {
+    await page.getByTestId('react-node-description').click();
+    await expect(page.getByText('This is my custom ReactNode description')).toHaveCount(1);
+  });
 });