TreeSelect: Panel closes, or selectedValue becomes null when watching a prop change and scrolling down

[faridguzman91]

Describe the bug

In my code for the treeselect i am watching some prop changes that are being emitted to the parent component, however when i put the selectValue ref to null in the watcher whenever the prop value equals null, the panel seems to auto close, however that doesnt seem to happen when i dont set selectValue to null in the watcher:

This is my code currently:

<template>
  <div
    title="queue selector"
    data-cy="filter-tree-list"
    class="shadow appearance-none border rounded text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
  >
    <FloatLabel class="w-full md:w-20rem">
      <TreeSelect
        ref="treeRef"
        title=""
        display="chip"
        aria-labelledby="label"
        role="combobox"
        aria-expanded="undefined"
        variant="outlined"
        placeholder=""
        v-model="selectedValue"
        :options="props.filter.data"
        selectionMode="checkbox"
        class="w-full md:w-30rem text-sm p-0 accent-gray-500"
        @nodeSelect="onNodeSelect"
        @nodeUnselect="onNodeUnselect"
      >
      </TreeSelect>
      <label> {{ $t("button.select_queue") }}</label>
    </FloatLabel>
  </div>
</template>

<script setup lang="ts">
import { defineEmits, defineProps, onMounted, ref, watch, inject} from "vue";
import FloatLabel from "primevue/floatlabel";
import { useConfigStore } from "../../../../store/pinia/configStore.ts";
import { useConversationStore } from "../../../../store/pinia/conversationStore";

const props = defineProps({
  filter: {
    type: Object as () => Filter,
    required: true,
  },
  isReadOnly: {
    type: Object as () => Boolean,
    default: false,
  },

const changed = ref(false);
const selectedValue = ref(null);
const checkedIds = ref<string>([]);

onMounted(() => {
  ConversationService.getFilterGroups()
    .then((filterGroups: FilterGroup) => {
      if (filterGroups) {
        piniaConversations.filters.group.data = filterGroups;
      }
    })
    .catch((error) => {
      if (error.status === 401) {
        piniaConfig.setAuthenticated(false);
      }
    });
});


//the watcher watching the prop change
watch(
  () => props.filter.value,
  (newValue) => {
    if (newValue === "") {
      selectedValue.value = null;
      checkedIds.value = []; // Optionally clear checkedIds as well
    }
  },
);

const onNodeSelect = (node: Node) => {
  if (props.filter == undefined) return;
  checkedIds.value.push(node.key);
  const checked = node.checked;
  if (Array.isArray(node.children)) {
    node.children.forEach((child) => {
      checkedIds.value.push(child.key);
    });
  }

  props.filter.value =
    checkedIds.value.length > 0 ? checkedIds.value.join(",") : "";
  filterHasChanged();

  if (props.filter.immediate) {
    emitFilterChange();
  }
};

const onNodeUnselect = (node) => {
  let unselectedIds = node.key;
  checkedIds.value = checkedIds.value.filter((key) => key !== unselectedIds);
  if (Array.isArray(node.children)) {
    node.children.forEach((child) => {
      checkedIds.value = [];
      child.checked = false;
    });
  }
  props.filter.value = checkedIds.value;
  filterHasChanged();
  if (props.filter.immediate) {
    emitFilterChange();
  }
};

const filterHasChanged = () => {
  changed.value = true;
};

const emitFilterChange = () => {
  if (changed.value) {
    emit("filterChange", props.filter);
    changed.value = false;
  }
};
});
</script>

*for security reasons i cannot make an exact reproduction but theres the gist of what im talking about in comment format

Reproducer

https://stackblitz.com/edit/ei89hb-ghosup?file=src%2FApp.vue

PrimeVue version

3.48.1

Vue version

3.x

Language

TypeScript

Build / Runtime

Vite

Browser(s)

Edge, Chromium, Firefox

Steps to reproduce the behavior

1. Select a child node from the TreeSelect
2. Scroll down a table component, or scroll down in another component
3. The selected nodes become unchecked, sometimes closing the panel

Expected behavior

1. Select a child node from the TreeSelect
2. Scroll down a table, or scroll down another component
3. The selected nodes should be active, and panel doesnt close when i reach end of page.