Search code examples
nuxt.jsprimevuenuxt3.js

Nuxt 3 + Primevue's Dropdown: Arrow Keys not working

I have two Nuxt 3 projects where the PrimeVue Dropdowns do not work properly when using the arrow keys:

Expected behaviour:

When focused, the dropdown should scroll through its values when I use the arrow keys.

It works as intended on the primevue demo page

enter image description here

Actual behaviour

The dropdown opens, but the arrow keys control the internal scrollbar of the dropdown. The focus stays on the arrow symbol:

enter image description here

I am not sure if this is a Nuxt oder Primevue problem. Any ideas?

Solution

  • All right, I found the culprit. In my nuxtConfig the theme was missing. Once I added it, it works as intended:

    export default defineNuxtConfig({
  css: [
    'primevue/resources/themes/saga-blue/theme.css',
    'primevue/resources/primevue.css',
    'primeicons/primeicons.css',
    'primeflex/primeflex.css'
  ],
  build: {
    transpile: ['primevue']
  },
  ssr: false
})

    The reason the theme was missing there is because I was importing it like this in my app.vue so I thought I did not need it in my nuxtConfig:

    <link id="theme-link" rel="stylesheet" href="/theme/arya-blue/theme.css"/>

    And the only reason I import it like this is because it allows me to easily switch themes...