From fe2c8bcd8240eb9b15d99c0b5235f1c2cc8245ba Mon Sep 17 00:00:00 2001
From: Steffan Levet <steffan@narrative.so>
Date: Thu, 11 Jan 2024 15:49:32 +1300
Subject: [PATCH] fix: update the logic of tag_name to prefer a ph-label from a
 parent over a display name or similar

---
 posthog-react-native/src/autocapture.tsx       | 18 ++++++++++++++++++
 .../__snapshots__/autocapture.spec.ts.snap     |  8 ++++----
 .../test/data/autocapture-event.json           |  5 +++--
 3 files changed, 25 insertions(+), 6 deletions(-)

diff --git a/posthog-react-native/src/autocapture.tsx b/posthog-react-native/src/autocapture.tsx
index 560d6063..4412645f 100644
--- a/posthog-react-native/src/autocapture.tsx
+++ b/posthog-react-native/src/autocapture.tsx
@@ -105,6 +105,24 @@ export const autocaptureFromTouchEvent = (e: any, posthog: PostHog, options: Pos
   }
 
   if (elements.length) {
+    // The element that was tapped, may be a child (or grandchild of an element with a ph-label)
+    // In this case, the current labels applied obscure the ph-label
+    // To correct this, loop over the elements in reverse, and promote the ph-label
+    const elAttrLabelKey = `attr__${customLabelProp}`
+    let lastLabel: string | undefined = undefined
+
+    for (let i = elements.length - 1; i >= 0; i--) {
+      const element = elements[i]
+      if (element[elAttrLabelKey]) {
+        // this element had a ph-label set, promote it to the lastLabel
+        lastLabel = element[elAttrLabelKey]
+      }
+      
+      // if lastLabel is set, update this elements tag_name
+      if (lastLabel) {
+        element['tag_name'] = lastLabel
+      }
+    }
     posthog.autocapture('touch', elements, {
       $touch_x: e.nativeEvent.pageX,
       $touch_y: e.nativeEvent.pageY,
diff --git a/posthog-react-native/test/__snapshots__/autocapture.spec.ts.snap b/posthog-react-native/test/__snapshots__/autocapture.spec.ts.snap
index c4e82a6f..4b281979 100644
--- a/posthog-react-native/test/__snapshots__/autocapture.spec.ts.snap
+++ b/posthog-react-native/test/__snapshots__/autocapture.spec.ts.snap
@@ -12,16 +12,16 @@ Array [
     },
     Object {
       "$el_text": "I have the property \\"ph-label\\" which means touching me will be autocaptured with a specific label",
-      "attr__ph-label": "special-text",
       "attr__testID": "example-ph-label",
-      "tag_name": "special-text",
+      "tag_name": "higher-level-element",
     },
     Object {
       "attr__style": "backgroundColor:rgba(0,0,0,.1);padding:15;borderRadius:10;marginBottom:10",
-      "tag_name": "View",
+      "tag_name": "higher-level-element",
     },
     Object {
-      "tag_name": "View",
+      "attr__ph-label": "higher-level-element",
+      "tag_name": "higher-level-element",
     },
     Object {
       "attr__style": "flex:1",
diff --git a/posthog-react-native/test/data/autocapture-event.json b/posthog-react-native/test/data/autocapture-event.json
index 210b5938..0bd60635 100644
--- a/posthog-react-native/test/data/autocapture-event.json
+++ b/posthog-react-native/test/data/autocapture-event.json
@@ -16,7 +16,6 @@
       "elementType": { "displayName": "Text" },
       "memoizedProps": {
         "testID": "example-ph-label",
-        "ph-label": "special-text",
         "children": "I have the property \"ph-label\" which means touching me will be autocaptured with a specific label"
       },
       "return": {
@@ -40,7 +39,9 @@
                 "memoizedProps": { "value": false },
                 "return": {
                   "elementType": { "displayName": "View" },
-                  "memoizedProps": {},
+                  "memoizedProps": {
+                    "ph-label": "higher-level-element"
+                  },
                   "return": {
                     "elementType": {},
                     "memoizedProps": {},