ignore elements that are no longer in the document (#7881)

* ignore elements that are no longer in the document - closes #7876

* we cant use document.contains because of fucking shadow DOM

Author: Rich-Harris

.changeset/light-papayas-agree.md

@@ -0,0 +1,5 @@
+---
+'@sveltejs/kit': patch
+---
+
+Ignore elements that are no longer in the document

packages/kit/src/runtime/client/utils.js

@@ -101,7 +101,7 @@ function parent_element(element) {
  * @param {Element} target
  */
 export function find_anchor(element, target) {
-	while (element !== target) {
+	while (element && element !== target) {
 		if (element.nodeName.toUpperCase() === 'A') {
 			return /** @type {HTMLAnchorElement | SVGAElement} */ (element);
 		}

packages/kit/test/apps/basics/src/routes/interactivity/toggle-element/+page.svelte

@@ -0,0 +1,13 @@
+<script>
+	let visible = true;
+
+	function toggle() {
+		visible = !visible;
+	}
+</script>
+
+{#if visible}
+	<button on:click={toggle}>remove</button>
+{:else}
+	<button on:click={toggle}>add</button>
+{/if}

packages/kit/test/apps/basics/test/client.test.js

@@ -1184,3 +1184,22 @@ test.describe('cookies', () => {
 		await expect(page.locator('p')).toHaveText('foo=bar');
 	});
 });
+
+test.describe('Interactivity', () => {
+	test('click events on removed elements are ignored', async ({ page }) => {
+		let errored = false;
+
+		page.on('pageerror', (err) => {
+			console.error(err);
+			errored = true;
+		});
+
+		await page.goto('/interactivity/toggle-element');
+		expect(await page.textContent('button')).toBe('remove');
+
+		await page.click('button');
+		expect(await page.textContent('button')).toBe('add');
+
+		expect(errored).toBe(false);
+	});
+});