From bf7e4f0334a162fa4cf460fdb23b26b742ef02dc Mon Sep 17 00:00:00 2001
From: Github Actions <hariombalhara@gmail.com>
Date: Wed, 22 Sep 2021 18:57:35 +0530
Subject: [PATCH] Add listener in capture phase and locate nearest source if
 needed

1. Capture Phase listener allows the plugin to work for the cases where stopPropagation is done in bubble phase.
2. Looking for nearest parent element with dataset source handles the case when the element directly doesn't have dataset source. This hhappens if the element is not created through JSX e.g. Chakra UI ModalCloseButton. Basically any component coming through an npm dependency should have this problem. See https://codesandbox.io/s/suspicious-breeze-smdrq?file=/src/index.js
---
 packages/babel-plugin-open-source/script.js | 33 +++++++++++++++------
 1 file changed, 24 insertions(+), 9 deletions(-)

diff --git a/packages/babel-plugin-open-source/script.js b/packages/babel-plugin-open-source/script.js
index 9bca45f..7d0e794 100644
--- a/packages/babel-plugin-open-source/script.js
+++ b/packages/babel-plugin-open-source/script.js
@@ -1,10 +1,25 @@
-if (typeof document !== 'undefined') {
-  document.addEventListener('click', (event) => {
-    if (!event.target.dataset.source) return;
-    if (!event.altKey) return;
+(function () {
+  
+  // Element being clicked might not have the dataset source on it directly.
+  // Get the nearest available in the tree
+  // e.g. this happens for Chakra UI Components.
+  function getSource(element) {
+    while (element && !element.dataset.source) {
+      element = element.parentElement;
+    }
 
-    event.preventDefault();
-    const { filename, start } = JSON.parse(event.target.dataset.source)
-    window.open('vscode://file/' + filename + ':' + start)
-  })
-}
+    return element ? element.dataset.source : null;
+  }
+
+  if (typeof document !== 'undefined') {
+    document.addEventListener('click', (event) => {
+      if (!event.altKey) return;
+      let source = getSource(event.target)
+      if (!source) return;
+
+      event.preventDefault();
+      const { filename, start } = JSON.parse(source)
+      window.open('vscode://file/' + filename + ':' + start)
+    }, true)
+  }
+})();
\ No newline at end of file