Dropdown openDelay not working?

[Andy Neale]

Environment

Stackblitz

Version

v2.13

Reproduction

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

Description

I cant seem to get openDelay and closedelay working when set in the main app config or on the ui attribute of the dropdown component. Also the docs do not state if this is in seconds or milliseconds.

Additional context

No response

Logs

No response

[Whbbit1999]

I saw your example and found something wrong with your configuration,
In UDropdown components, currently the open-delay or close-delay configuration will only take effect when the mode is hover.
If you want to use open-delay or close-delay, you can try changing your component configuration to the following content.

<UDropdown 
    :items="items" 
    :mode="'hover'" 
    :open-delay="1000" 
    :close-delay="1000" 
    :ui="{ item: { disabled: 'cursor-text select-text' } }"
  >
    <UAvatar src="https://avatars.githubusercontent.com/u/739984?v=4" />

    <template #account="{ item }">
      <div class="text-left">
        <p>Signed in as</p>
        <p class="truncate font-medium text-gray-900 dark:text-white">
          {{ item.label }}
        </p>
      </div>
    </template>

    <template #item="{ item }">
      <span class="truncate">{{ item.label }}</span>

      <UIcon :name="item.icon" class="flex-shrink-0 h-4 w-4 text-gray-400 dark:text-gray-500 ms-auto" />
    </template>
  </UDropdown>

[Andy Neale]

Ah right, I missed that it is only for hover. Is this documented?

I am trying to prevent the dropdown from closing when it is clicked as I am building a drill down filter using the dropdown component.

Essentially, I am replacing the items with a new set of items when the user clicks to achieve this drill down effect.

It works really well apart from a small issue because it closes on click.

My workaround: on click I reopen it after 1ms but the side effect is that it causes a flash.

I was hoping I could use delay to get around this.

Is there a way to prevent the dropdown closing on click?

[Whbbit1999]

It is not reflected in the documentation that open-delay or close-delay must be when mode is hover. Maybe I can try adding it to the documentation.

As for the need to delay when clicking, it seems that it is not supported at present.

[Benjamin Canac]

Wouldn't it be simpler to use a Popover for this? https://ui.nuxt.com/components/popover

[Andy Neale]

@benjamincanac Thanks, I was just thinking the same. I am going to rework it to use the verticalNavigation inside a popover. That way I can still control which set of menu items are showing like I can with the drop down but without the side effects.