fix: Issue 10602 main (#10614)

web/src/plugins/logs/IndexList.vue

@@ -39,7 +39,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         @update:model-value="handleMultiStreamSelection"
       >
         <q-tooltip
-          v-if="searchObj.data.stream.selectedStream.length > 0"
+          v-if="searchObj.data.stream.selectedStream.length > 1"
           :delay="500"
           anchor="bottom left"
           self="top left"
@@ -224,21 +224,21 @@ export default defineComponent({
         this.searchObj.data.stream.selectedFields = [];
       }
       this.searchObj.data.stream.selectedStream = [opt.value];
-      // Clear the filter input and close the menu when single stream is selected
-      //we will first check if qselect is there or not and then call the method
-      //we will use the quasar next tick to ensure that the dom is updated before we call the method
-      //we will also us the quasar's updateInputValue method to clear the input value
+      // Close the popup first (synchronously) before clearing the filter.
+      // If we clear the filter first, the virtual scroll re-renders with the full
+      // list while the dropdown is still open, causing a blank/misaligned display.
+      const indexListSelectField = this.$refs.streamSelect as any;
+      if (indexListSelectField?.hidePopup) {
+        indexListSelectField.hidePopup();
+      }
       this.$nextTick(() => {
-        const indexListSelectField = this.$refs.streamSelect;
-        if (indexListSelectField) {
-          // Clear the search input
-          if (indexListSelectField.updateInputValue) {
-            indexListSelectField.updateInputValue("");
-          }
-          // // Close the dropdown menu
-          // if (indexListSelectField.hidePopup) {
-          //   indexListSelectField.hidePopup();
-          // }
+        if (indexListSelectField?.updateInputValue) {
+          indexListSelectField.updateInputValue("");
+        }
+        // Reset virtual scroll to the top so the list starts from position 0
+        // the next time the dropdown is opened.
+        if (indexListSelectField?.scrollTo) {
+          indexListSelectField.scrollTo(0);
         }
       });
       this.onStreamChange("");

web/src/plugins/traces/Index.spec.ts

@@ -207,9 +207,13 @@ vi.mock("@/composables/useTraces", () => ({
   }),
 }));
 
+const { mockGetStreams } = vi.hoisted(() => ({
+  mockGetStreams: vi.fn(),
+}));
+
 vi.mock("@/composables/useStreams", () => ({
   default: () => ({
-    getStreams: vi.fn(() => Promise.resolve(mockStreamList)),
+    getStreams: mockGetStreams,
     getStream: vi.fn((streamName) =>
       Promise.resolve(mockStreamList.list.find((s) => s.name === streamName))
     ),
@@ -261,6 +265,7 @@ describe("Index.vue (Main Traces Page)", () => {
 
   beforeEach(async () => {
     // Reset mock data
+    mockGetStreams.mockResolvedValue(mockStreamList);
     mockSearchObj.loading = false;
     mockSearchObj.loadingStream = false;
     mockSearchObj.data.stream.streamLists = [];
@@ -1114,14 +1119,7 @@ describe("Index.vue (Main Traces Page)", () => {
 
   describe("Edge Cases", () => {
     it("should handle empty stream list gracefully", async () => {
-      const mockGetStreams = vi.fn(() => Promise.resolve({ list: [] }));
-
-      vi.doMock("@/composables/useStreams", () => ({
-        default: () => ({
-          getStreams: mockGetStreams,
-          getStream: vi.fn(),
-        }),
-      }));
+      mockGetStreams.mockResolvedValueOnce({ list: [] });
 
       wrapper = mount(Index, {
         attachTo: node,