Select with template, renders white list with opaque options. No error output.Strange behaviour.

[ciumexan]

Describe the bug

Hello. We have this issue, where all the populated template becomes white with no actual error popping out.

our code looks like this:

<template>

<Select id="brandul" v-model="selectedBrand" :options="theBrands" :placeholder="$t('garage_add_bike_select_brand')" fluid class="p-2">
                          <template #option="{ option }">
                                    <div class="flex items-center gap-2">
                                      <div><img class="w-10 h-10 rounded-full" :src="`/img/brands/${option.img}.jpg`"/></div>
                                      <div class="uppercase font-black">{{ option.marca }}</div>
                                    </div>
                          </template> 
                          <template #value="slotProps">
                                      <div v-if="slotProps.value" class="flex items-center">
                                        <div class="flex items-center gap-2 text-xs">
                                          <div><img class="w-6 h-6 rounded-full" :src="`/img/brands/${slotProps.value.img}.jpg`"/></div>
                                          <div class="uppercase font-black">{{ slotProps.value.marca }}</div>
                                        </div>
                                      </div>
                                      <span v-else>
                                          {{ slotProps.placeholder }}
                                      </span>
                                  </template>
                          
                        </Select>
</template>



<script lang="ts" setup>
const theBrands = ref([{"id":"00","marca":"- NoName","img":"noname"},
{"id":"119","marca":"Zuendapp","img":"zuendapp"}, {"id":"119","marca":"Zuendapp","img":"zuendapp"}] //here all the 150 brands.
const selectedBrand = ref()
</script>

Pull Request Link

No response

Reason for not contributing a PR

• Lack of time
• Unsure how to implement the fix/feature
• Difficulty understanding the codebase
• Other

Other Reason

No response

Reproducer

https://stackblitz.com/edit/primevue-4-vite-issue-template-g639dwdm?file=src%2FApp.vue

Environment

NUXT3, inside a vue component using composition api and typescript

Vue version

3.5.13

PrimeVue version

4.2.5

Node version

v20.11.1

Browser(s)

Chrome / Safari

Steps to reproduce the behavior

see the video. It is because of the id of the select (maybe because we want to use linked selects?)

Expected behavior

Expected to see complete selection of options. Like this is a white transparent list. If you click anywhere in the transparent area actually you can select... as you can see in the animation attached.

[ridernet]

I get the same behaviour and ended up using the normal select (not primevue's)
I just realised that this behaviour happens where there are more than one Select in the component.
Maybe using a different id for each select will solve it?

[ciumexan]

I keep getting this behaviour in primevue select dialogs.
I guess is the tailwind and primevue not playing correctly
My versions:
tailwindcss@3.4.17
primevue@4.2.5
nuxt@3.15.4

My implementation on CSS is:

@layer tailwind-base, primevue, tailwind-utilities;

@layer tailwind-base {
    @tailwind base;
}

@layer tailwind-utilities {
    @tailwind components;
    @tailwind utilities;
}

and my config is:

  css: [
            'primeicons/primeicons.css',
          ],
          primevue: {
                    options: {
                              theme: {
                                      preset: mythemelook,
                                      options: {
                                                    prefix: 'p',
                                                    darkModeSelector: '.mytheme-dark',
                                                    cssLayer: false
                                               },
                                               
                                     }
                             }
                    },

Do you have any idea where to search for the pb.? I donțt get any verbose logs or any error... the dialog is opaque... the data is still there...

[tugcekucukoglu]

We couldn't run the stackblitz demo because there were too many errors. Please update the demo.