[Dropdown] Items with `to` don't trigger on `enter` keydown

[pozdnyakoff]

Version

@nuxt/ui: v2.8.1 nuxt: v3.7.1

Reproduction Link

https://stackblitz.com/edit/nuxt-ui-rn5ikw?file=app.vue

[Sma11X]

Every item of items should be an array. Your example set all in one array.

[pozdnyakoff]

I have provided only one group of items (:items="[items]") as described in the docs:

Each array represents a group of items.

[Sma11X]

Ah sorry I missed that array. Yes it looks like a bug that should get dom but instead of TEXT. You can set click and use navigateTo instead of to for now.

[schirrel]

@pozdnyakoff indeed it seems to have a bug. I've tried the example of nuxtlink on nuxt docs (https://nuxt.com/docs/examples/routing/pages) and both external or internal link worked with enter hit. Algo on your example, i passsed the external props to see if it can be a change and nothing happened

[schirrel]

I've forked the nuxt/ui repo, and add a test within the docuentation sample example (this commit), To have also:

  [
    {
      label: 'Google',
      to: 'https://www.google.com/',
      external: true,
      target: '__blank'
    }
  ]

on the simple mode section example. Then when i hit enter on the Google, the console throws a exception:

chunk-2AGPK4FE.js:1449 [Vue warn]: Unhandled error during execution of native event handler 
  at <MenuItems class="relative focus:outline-none overflow-y-auto scroll-py-1 divide-y divide-gray-200 dark:divide-gray-700 ring-1 ring-gray-200 dark:ring-gray-700 rounded-md shadow-lg bg-white dark:bg-gray-800" static="" > 
  at <BaseTransition appear=true persisted=false mode=undefined  ... > 
  at <Transition appear="" enterActiveClass="transition duration-100 ease-out" enterFromClass="transform scale-95 opacity-0"  ... > 
  at <Menu as="div" class="relative inline-flex text-left rtl:text-right" onMouseleave=fn<onMouseLeave> > 
  at <Dropdown items= (2) [Array(1), Array(1)] mode="hover" popper= {placement: 'bottom-start'} > 
  at <DropdownExampleMode > 
  at <ComponentExample > 
  at <MDCRenderer body= {type: 'root', children: Array(17), toc: {…}} data= {_path: '/elements/dropdown', _dir: 'elements', _draft: false, _partial: false, _locale: '', …} tag="div"  ... > 
  at <ContentRendererMarkdown value= {_path: '/elements/dropdown', _dir: 'elements', _draft: false, _partial: false, _locale: '', …} excerpt=false tag="div" > 
  at <ContentRenderer key=0 value= {_path: '/elements/dropdown', _dir: 'elements', _draft: false, _partial: false, _locale: '', …} > 
  at <PageBody prose="" > 
  at <Page> 
  at <[...slug] onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< Proxy(Object) {__v_skip: true} > > 
  at <RouteProvider key="/elements,dropdown" vnode= {__v_isVNode: true, __v_skip: true, type: {…}, props: {…}, key: null, …} route= {fullPath: '/elements/dropdown#usage', hash: '#usage', query: {…}, name: 'slug', path: '/elements/dropdown', …}  ... > 
  at <RouterView name=undefined route=undefined > 
  at <NuxtPage> 
  at <Page> 
  at <Container> 
  at <Main> 
  at <Docs ref=Ref< Proxy(Object) {__v_skip: true} > > 
  at <LayoutLoader key="docs" layoutProps= {ref: RefImpl} name="docs" > 
  at <NuxtLayoutProvider layoutProps= {ref: RefImpl} key="docs" name="docs"  ... > 
  at <NuxtLayout> 
  at <App key=3 > 
  at <NuxtRoot>
warn2 @ chunk-2AGPK4FE.js:1449
logError @ chunk-2AGPK4FE.js:1623
handleError @ chunk-2AGPK4FE.js:1615
callWithErrorHandling @ chunk-2AGPK4FE.js:1567
callWithAsyncErrorHandling @ chunk-2AGPK4FE.js:1573
invoker @ chunk-2AGPK4FE.js:9397
01:36:48.253 chunk-2AGPK4FE.js:1628 Uncaught TypeError: p8.click is not a function
    at s2 (:3000/_nuxt/node_modules/.cache/vite/client/deps/@headlessui_vue.js?v=c9a869a4:1924:54)
    at onKeydown (:3000/_nuxt/node_modules/.cache/vite/client/deps/@headlessui_vue.js?v=c9a869a4:99:9)
    at callWithErrorHandling (:3000/_nuxt/node_modules/.cache/vite/client/deps/chunk-2AGPK4FE.js?v=c9a869a4:1565:18)
    at callWithAsyncErrorHandling (:3000/_nuxt/node_modules/.cache/vite/client/deps/chunk-2AGPK4FE.js?v=c9a869a4:1573:17)
    at HTMLDivElement.invoker (:3000/_nuxt/node_modules/.cache/vite/client/deps/chunk-2AGPK4FE.js?v=c9a869a4:9397:5)

Full video: https://github.com/nuxt/ui/assets/6757777/56cb7b69-4cd3-4e7f-8cf5-251361b1fa91

Steps i've done:

• clone nuxt/ui
• pnpm install
• add the the new item on the DropdownExampleMode.vue
• pnpm dev
• Done keyboard navigation and hit enter when on Google option

When click with mouse no error is thrown

[schirrel]

Looks like it is something with ULink. I tried to reproduce simple usage with headlessui/vue, and when trying to understand more the bug, i sawe that with plain nuxtlink, no problem happens, only with ULink :( https://stackblitz.com/edit/nuxt-ui-dwkesy?file=app.vue

edit: looks like it is about the custom property on the NuxtLink

[thunfisch987]

The same problem exists with VerticalNavigation, where you can only focus elements with href

[benjamincanac]

I've made a PR to use NuxtLink instead of ULink, let me know what you think!

[thunfisch987]

This only fixes it for Dropdown, right?

[benjamincanac]

Would you mind opening a new issue for the VerticalNavigation?

[thunfisch987]

Imma do that, but i think the problem exists with every component based on ULink

[benjamincanac]

I haven't been able to reproduce with the VerticalNavigation neither with the Button, both clicking or pressing enter on focus works fine for both cases as links or button. That's why I need a new issue with a reproduction.

[thunfisch987]

i just realized that this is actually not related to my problem, sorry