From 7b9686e947115bbcb95b59e5117aa743f5ffe3fc Mon Sep 17 00:00:00 2001 From: Ted Xu Date: Fri, 29 Mar 2024 10:41:43 +0800 Subject: [PATCH 1/4] fix: when inspecting an element, clicking on the green rectangle causes the event to propagate downwards --- packages/devtools-kit/src/core/component-highlighter/index.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/devtools-kit/src/core/component-highlighter/index.ts b/packages/devtools-kit/src/core/component-highlighter/index.ts index 587b091a..4afbe200 100644 --- a/packages/devtools-kit/src/core/component-highlighter/index.ts +++ b/packages/devtools-kit/src/core/component-highlighter/index.ts @@ -20,7 +20,6 @@ const containerStyles = { border: '1px solid #42b88350', borderRadius: '5px', transition: 'all 0.1s ease-in', - pointerEvents: 'none', } const cardStyles = { @@ -193,6 +192,8 @@ export function inspectComponentHighLighter() { window.addEventListener('mouseover', inspectFn) return new Promise((resolve) => { function onSelect(e: MouseEvent) { + console.log(e.target) + e.preventDefault() e.stopPropagation() selectComponentFn(e, (id: string) => { From f31510e926e0f3d68d1db129eedac909c616602c Mon Sep 17 00:00:00 2001 From: Ted Xu Date: Fri, 29 Mar 2024 10:58:25 +0800 Subject: [PATCH 2/4] chore: remove console.log statement --- packages/devtools-kit/src/core/component-highlighter/index.ts | 2 -- 1 file changed, 2 deletions(-) diff --git a/packages/devtools-kit/src/core/component-highlighter/index.ts b/packages/devtools-kit/src/core/component-highlighter/index.ts index 4afbe200..cb74ca97 100644 --- a/packages/devtools-kit/src/core/component-highlighter/index.ts +++ b/packages/devtools-kit/src/core/component-highlighter/index.ts @@ -192,8 +192,6 @@ export function inspectComponentHighLighter() { window.addEventListener('mouseover', inspectFn) return new Promise((resolve) => { function onSelect(e: MouseEvent) { - console.log(e.target) - e.preventDefault() e.stopPropagation() selectComponentFn(e, (id: string) => { From bae3d29f101becaba80d8d9dd78f359b636cdb30 Mon Sep 17 00:00:00 2001 From: Ted Xu Date: Fri, 29 Mar 2024 13:30:57 +0800 Subject: [PATCH 3/4] chore: invert changes --- packages/devtools-kit/src/core/component-highlighter/index.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/devtools-kit/src/core/component-highlighter/index.ts b/packages/devtools-kit/src/core/component-highlighter/index.ts index cb74ca97..587b091a 100644 --- a/packages/devtools-kit/src/core/component-highlighter/index.ts +++ b/packages/devtools-kit/src/core/component-highlighter/index.ts @@ -20,6 +20,7 @@ const containerStyles = { border: '1px solid #42b88350', borderRadius: '5px', transition: 'all 0.1s ease-in', + pointerEvents: 'none', } const cardStyles = { From 4fc93561e5eab78fe942fedefc151125255fee4e Mon Sep 17 00:00:00 2001 From: Ted Xu Date: Fri, 29 Mar 2024 15:06:54 +0800 Subject: [PATCH 4/4] chore: use another way to handle it --- packages/devtools-kit/src/core/component-highlighter/index.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/devtools-kit/src/core/component-highlighter/index.ts b/packages/devtools-kit/src/core/component-highlighter/index.ts index 587b091a..679906e3 100644 --- a/packages/devtools-kit/src/core/component-highlighter/index.ts +++ b/packages/devtools-kit/src/core/component-highlighter/index.ts @@ -196,7 +196,7 @@ export function inspectComponentHighLighter() { e.preventDefault() e.stopPropagation() selectComponentFn(e, (id: string) => { - window.removeEventListener('click', onSelect) + window.removeEventListener('click', onSelect, true) window.removeEventListener('mouseover', inspectFn) const el = getContainerElement() if (el) @@ -204,7 +204,7 @@ export function inspectComponentHighLighter() { resolve(JSON.stringify({ id })) }) } - window.addEventListener('click', onSelect) + window.addEventListener('click', onSelect, true) }) }