Merge branch 'main' into add-searchable-select

viamrobotics · Aug 29, 2023 · e7237b9 · e7237b9
2 parents 6ac0922 + cc97ecd
commit e7237b9
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 5 deletions.
diff --git a/packages/core/package.json b/packages/core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@viamrobotics/prime-core",
-  "version": "0.0.19",
+  "version": "0.0.20",
   "publishConfig": {
     "access": "public"
   },

diff --git a/packages/core/src/lib/__tests__/click-outside.spec.svelte b/packages/core/src/lib/__tests__/click-outside.spec.svelte
@@ -8,4 +8,6 @@ export let onClickOutside: () => void;
 <div
   data-testid="subject"
   use:clickOutside={onClickOutside}
-/>
+>
+  <button data-testid="inside" />
+</div>
diff --git a/packages/core/src/lib/__tests__/click-outside.spec.ts b/packages/core/src/lib/__tests__/click-outside.spec.ts
@@ -11,15 +11,32 @@ describe('use:clickOutside', () => {
     render(Subject, { onClickOutside });
 
     const user = userEvent.setup();
-    const outsideButton = screen.getByTestId('outside');
     const subject = screen.getByTestId('subject');
+    const insideButton = screen.getByTestId('inside');
+    const outsideButton = screen.getByTestId('outside');
 
     await user.click(subject);
+    await user.click(insideButton);
 
     expect(onClickOutside).not.toHaveBeenCalled();
 
     await user.click(outsideButton);
 
     expect(onClickOutside).toHaveBeenCalledOnce();
   });
+
+  it('should not trigger if clicked element gets removed from the DOM', async () => {
+    render(Subject, { onClickOutside });
+
+    const user = userEvent.setup();
+    const insideButton = screen.getByTestId('inside');
+
+    insideButton.addEventListener('click', () => {
+      insideButton.remove();
+    });
+
+    await user.click(insideButton);
+
+    expect(onClickOutside).not.toHaveBeenCalled();
+  });
 });
diff --git a/packages/core/src/lib/click-outside.ts b/packages/core/src/lib/click-outside.ts
@@ -26,7 +26,7 @@ import type { Action } from 'svelte/action';
  * @param handler The callback to run
  * @returns The Svelte Action
  */
-export const clickOutside: Action<HTMLElement, () => unknown> = (
+export const clickOutside: Action<HTMLElement | undefined, () => unknown> = (
   node,
   handler
 ) => {
@@ -35,7 +35,8 @@ export const clickOutside: Action<HTMLElement, () => unknown> = (
   const handleWindowClick = (event: MouseEvent): void => {
     if (
       node &&
-      !node.contains(event.target as Element | null) &&
+      window.document.contains(event.target as Element) &&
+      !node.contains(event.target as Element) &&
       !event.defaultPrevented
     ) {
       handleClickOutside();