Multiselect: Menu closes on select

[Rakasch]

Describe the bug

I want to display the selected options at the top of the list.
I therefore sort the selected options to the top.

If I now click on something further down in the menu, it is automatically sorted to the top.
At the same time, the menu closes by mistake. The menu should remain open.

Cause of the error:
Since I use the virtualscroller, not all options are rendered in the html.
Therefore the outsideClickListener does not find the clicked option and thinks it was a click outside the menu.
The menu is then incorrectly closed.

Reproducer

https://stackblitz.com/edit/lictaz?file=src%2FApp.vue

PrimeVue version

3.41.0

Vue version

3.x

Language

ES6

Build / Runtime

Vite

Browser(s)

No response

Steps to reproduce the behavior

Open Menu
Scroll Down
Select an option
=> Menu will close

Expected behavior

Menu should stay open as long as I dont click outside.

[xiaodong2008]

You don't need to add to much options, just need to scroll and select then the problem can reproduce.

Array.from({ length: 10 }, (_, i) => ({ name: `City #${i}`, id: i }))

[xiaodong2008]

This problem is caused by components/lib/multiselect/MultiSelect.vue -> default.methods.bindOutsideClickListener and method isOutsideClicked()

bindOutsideClickListener() {
    if (!this.outsideClickListener) {
        this.outsideClickListener = (event) => {
            if (this.overlayVisible && this.isOutsideClicked(event)) {
                this.hide();
            }
        };
        document.addEventListener('click', this.outsideClickListener);
    }
}
isOutsideClicked(event) {
    return !(this.$el.isSameNode(event.target) || this.$el.contains(event.target) || (this.overlay && this.overlay.contains(event.target)));
}

The function isOutsideClicked should add one more expression to determine is className equal to p-multiselect-item

[MaXal]

Simple reproducer: https://stackblitz.com/edit/hmwkta?file=src/App.vue,package.json

<template>
  <div class="card flex justify-content-center">
    <MultiSelect
      v-model="selectedCities"
      :options="cities"
      optionLabel="name"
      placeholder="Select Cities"
      :maxSelectedLabels="3"
      class="w-full md:w-20rem"
    />
  </div>
</template>

<script setup>
import { computed, ref } from "vue"

const selectedCities = ref()

const cities = computed(() => {
  const cities = ref([
    { name: "New York", code: "NY" },
    { name: "Rome", code: "RM" },
    { name: "London", code: "LDN" },
    { name: "Istanbul", code: "IST" },
    { name: "Paris", code: "PRS" },
  ])
  return cities.value.sort((a, b) => {
    if (selectedCities.value.includes(a)) return -1
    if (selectedCities.value.includes(b)) return 1
    return 0
  })
})
</script>

[xiaodong2008]

I’ve tested #4864 and this pr should fix this issue.

[tugcekucukoglu]

Cannot replicate issue with the latest version. How can replicate the issue?

[MaXal]

@tugcekucukoglu Thank you for looking into the issue. The issue is still reproducible with V4: https://stackblitz.com/edit/ivkrzp?file=src%2FApp.vue