From 2f4f56730426e8aafd4d5df4e9ff1d5a59dcdb05 Mon Sep 17 00:00:00 2001
From: Bhargav <BJP232004@GMAIL.COM>
Date: Mon, 7 Jul 2025 13:55:59 +0530
Subject: [PATCH] fix: fix for list item not clickable outside text (#7469)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

### **PR Type**
Bug fix


___

### **Description**
- Expand clickable area for list items

- Move include/exclude handlers to q-item

- Remove redundant label click directives

- Add click.stop to addFieldToTable item


___



### **Changes walkthrough** 📝
<table><thead><tr><th></th><th align="left">Relevant
files</th></tr></thead><tbody><tr><td><strong>Bug
fix</strong></td><td><table>
<tr>
  <td>
    <details>
<summary><strong>JsonPreview.vue</strong><dd><code>Expand clickable area
on list items</code>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </dd></summary>
<hr>

web/src/plugins/logs/JsonPreview.vue

<li>Moved @click.stop handlers from q-item-label to q-item<br> <li>
Removed redundant v-close-popup and click directives on labels<br> <li>
Added @click.stop to q-item for addFieldToTable action


</details>


  </td>
<td><a
href="https://github.com/openobserve/openobserve/pull/7469/files#diff-3985073134d35ff074742944b114d0905524038b42e6d2ac887fef2c8436fb16">+3/-8</a>&nbsp;
&nbsp; &nbsp; </td>

</tr>
</table></td></tr></tr></tbody></table>

___

> <details> <summary> Need help?</summary><li>Type <code>/help how to
...</code> in the comments thread for any questions about PR-Agent
usage.</li><li>Check out the <a
href="https://qodo-merge-docs.qodo.ai/usage-guide/">documentation</a>
for more information.</li></details>
---
 web/src/plugins/logs/JsonPreview.vue | 21 +++++++--------------
 1 file changed, 7 insertions(+), 14 deletions(-)

diff --git a/web/src/plugins/logs/JsonPreview.vue b/web/src/plugins/logs/JsonPreview.vue
index a981ff0a22..c000336803 100644
--- a/web/src/plugins/logs/JsonPreview.vue
+++ b/web/src/plugins/logs/JsonPreview.vue
@@ -139,13 +139,11 @@
                   item.name === key ? item.isSchemaField : '',
                 ) && multiStreamFields.includes(key)
               "
+              @click.stop="addSearchTerm(key, value[key], 'include')"
+              data-test="log-details-include-field-btn"
             >
               <q-item-section>
-                <q-item-label
-                  data-test="log-details-include-field-btn"
-                  @click.stop="addSearchTerm(key, value[key], 'include')"
-                  v-close-popup
-                  ><q-btn
+                <q-item-label><q-btn
                     title="Add to search query"
                     size="6px"
                     round
@@ -167,12 +165,11 @@
                   item.name === key ? item.isSchemaField : '',
                 ) && multiStreamFields.includes(key)
               "
+              @click.stop="addSearchTerm(key, value[key], 'exclude')"
+              data-test="log-details-exclude-field-btn"
             >
               <q-item-section>
                 <q-item-label
-                  data-test="log-details-exclude-field-btn"
-                  @click.stop="addSearchTerm(key, value[key], 'exclude')"
-                  v-close-popup
                   ><q-btn
                     title="Add to search query"
                     size="6px"
@@ -186,13 +183,9 @@
                 >
               </q-item-section>
             </q-item>
-            <q-item clickable v-close-popup>
+            <q-item clickable v-close-popup @click.stop="addFieldToTable(key)" data-test="log-details-add-field-btn">
               <q-item-section>
-                <q-item-label
-                  data-test="log-details-add-field-btn"
-                  @click.stop="addFieldToTable(key)"
-                  v-close-popup
-                  ><q-btn
+                <q-item-label><q-btn
                     title="Add field to table"
                     icon="visibility"
                     size="6px"