Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Dropdown: UpArrow triggers "Uncaught TypeError: this.visibleOptions.slice(...).findLastIndex is not a function" Firefox, Nuxt 3 #2872

Closed
ian4uia opened this issue Aug 22, 2022 · 0 comments
Assignees
Labels
Type: Bug Issue contains a bug related to a specific component. Something about the component is not working
Milestone

Comments

@ian4uia
Copy link

ian4uia commented Aug 22, 2022

Describe the bug

In Firefox from a Nuxt 3 app. When navigating the Dropdown options via keyboard, if any option other than the top is highlighted then pressing the up arrow key will trigger an error shown in the console as:
Uncaught TypeError: this.visibleOptions.slice(...).findLastIndex is not a function

To Reproduce from a shell with node v18.1.0 installed.

npx nuxi init nuxt3-prime-dropdown-bug
cd nuxt3-prime-dropdown-bug
yarn add primevue
mkdir plugins
touch plugins/primevue.ts

Add below code to the primevue.ts file that you just created:

// plugins/primevue.ts
import { defineNuxtPlugin } from '#app'
import PrimeVue from 'primevue/config'
import Dropdown from 'primevue/dropdown'
export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(PrimeVue, { ripple: true })
  nuxtApp.vueApp.component('Dropdown', Dropdown)
})

Now update nuxt.config.ts

import { defineNuxtConfig } from 'nuxt'

// https://v3.nuxtjs.org/api/configuration/nuxt.config
export default defineNuxtConfig({
  build: {
    transpile: ['primevue']
  },
  css: [
    'primevue/resources/themes/md-light-indigo/theme.css',
    'primevue/resources/primevue.min.css'
  ],
})

And create the test page:

mkdir pages
touch pages/index.vue

And add the code below:

<template>
  <div>
    <h3> {{ country }}</h3>
    <Dropdown
      v-model="country" :options="countries" optionLabel="name" optionValue="code"
    />
  </div>
</template>

<script setup lang="ts">
const countries = ref([
  {name: 'Australia', code: 'AU'},
  {name: 'Brazil', code: 'BR'},
  {name: 'China', code: 'CN'},
  {name: 'Egypt', code: 'EG'},
  {name: 'France', code: 'FR'},
  {name: 'Germany', code: 'DE'},
  {name: 'India', code: 'IN'},
  {name: 'Japan', code: 'JP'},
  {name: 'Spain', code: 'ES'},
  {name: 'United States', code: 'US'}
]);
const country = ref('AU')

</script>

Now update app.vue and change <NuxtWelcome /> to <NuxtPage />
And finally:
yarn run dev

Reproducer

No response

PrimeVue version

13.16.1

Vue version

3.x

Language

TypeScript

Build / Runtime

Nuxt

Browser(s)

Firefox 103.0.2 (64-bit)

Steps to reproduce the behavior

  1. Open Firefox at http://localhost:3000/ (Chrome and Edge are OK!)
  2. Tab to the Dropdown.
  3. Hit down arrow twice to enter the options and navigate to the second option "Brazil".
  4. Now hit the up arrow and the page errors with "Uncaught TypeError: this.visibleOptions.slice(...).findLastIndex is not a function"

Expected behavior

When hitting the up arrow the first item "Australia" should be highlighted with no error in the console.

@ian4uia ian4uia added the Type: Bug Issue contains a bug related to a specific component. Something about the component is not working label Aug 22, 2022
@mertsincan mertsincan self-assigned this Aug 22, 2022
@mertsincan mertsincan added this to the 3.16.2 milestone Aug 22, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Type: Bug Issue contains a bug related to a specific component. Something about the component is not working
Projects
None yet
Development

No branches or pull requests

2 participants