value?.toggle is not a function

[toniwebSci]

I'm having same issue for TieredMenu or OverlayPanel, but is curios that for Menu component the toggle method works just fine

This is how I'm trying (basically following the docs)

Code: Select all

<script setup lang="ts">
const overLayPanel = ref();
/*
  Toggles the overlay to display the multiselect
*/
const toggleOverlay = (event: Event) => {
  console.log(overLayPanel, overLayPanel.value);
  overLayPanel?.value?.toggle(event);
};
</script>
<template>
  <div class="table-column-filter">
    <svg
      @click="toggleOverlay"
    >
     <path />
    </svg>
    <OverlayPanel ref="overLayPanel">
      <MultiSelect
        :id="name"
        v-model="inputValue"
        :name="name"
        :options="fieldsArray"
        option-label="header"
        placeholder="Fields"
        @focus="onFocus()"
        @change="onChange()"
      >
        <template #value> </template>
      </MultiSelect>
      <ScilifeAppButton v-if="showApplyFilter" class="ml-2" :label="'Accept'" @click="applyFilter" />
    </OverlayPanel>
  </div>
</template>

And this is the error I'm getting:

chunk-BVQHDTV7.js:1628 Uncaught TypeError: overLayPanel?.value?.toggle is not a function
at toggleOverlay (FieldSelect.vue:113:24)
at callWithErrorHandling (chunk-BVQHDTV7.js:1565:18)
at callWithAsyncErrorHandling (chunk-BVQHDTV7.js:1573:17)
at SVGSVGElement.invoker (chunk-BVQHDTV7.js:9397:5)

And that console.log prints out the expected values ( RefImpl, <overflay panel data...></overlaypanel> ) but the method .toggle is not a function

The exact same behaviour for the TieredMenu but like I said no problem for the (regular) Menu component and they are supposed to work the same

We are using the PrimeVue inside a nuxt 3.6.3 project

[tugce.kucukoglu]

Could you create an issue with the reproducer link?