UPopover Added non-passive event listener to a scroll-blocking 'touchstart' event

[danielohling]

Environment

---

• Operating System: Linux
• Node Version: v21.7.1
• Nuxt Version: 3.10.3
• CLI Version: 3.10.1
• Nitro Version: 2.9.3
• Package Manager: yarn@4.1.1
• Builder: -
• User Config: routeRules, ssr, app, modules, directus, components, image, ui, runtimeConfig, devtools
• Runtime Modules: @nuxt/ui@2.14.2, @nuxt/image@1.4.0, nuxt-icon@0.6.9

• Build Modules: -

Version

v2.14.2

Reproduction

https://stackblitz.com/edit/nuxt-ui-ba3fd3

Description

I get an error from the UPopover component that Added non-passive event listener to a scroll-blocking 'touchstart' event.

The error occurs both in SSR and client side.

I have reproduce the error via stackblitz:

[Violation] Added non-passive event listener to a scroll-blocking 'touchstart' event. Consider marking event handler as 'passive' to make the page more responsive. See https://www.chromestatus.com/feature/5745543795965952

Additional context

No response

Logs

[Violation] Added non-passive event listener to a scroll-blocking <some> event. Consider marking event handler as 'passive' to make the page more responsive. See <URL>

[danielohling]

A little tweaking of the code is needed in both UPopover and UDropdown and change from prevent to passive on @touchstart event listeners.

Popover.vue

Before

    <HPopoverButton
      ref="trigger"
      as="div"
      :disabled="disabled"
      :class="ui.trigger"
      role="button"
      @mouseenter="onMouseEnter"
      @touchstart.prevent="onTouchStart"
    >
      <slot :open="open" :close="close">
        <button :disabled="disabled">
          Open
        </button>
      </slot>
    </HPopoverButton>

After

    <HPopoverButton
      ref="trigger"
      as="div"
      :disabled="disabled"
      :class="ui.trigger"
      role="button"
      @mouseenter="onMouseEnter"
      @touchstart.passive="onTouchStart"
    >
      <slot :open="open" :close="close">
        <button :disabled="disabled">
          Open
        </button>
      </slot>
    </HPopoverButton>

Dropdown.vue

Before

    <HMenuButton
      ref="trigger"
      as="div"
      :disabled="disabled"
      :class="ui.trigger"
      role="button"
      @mouseenter="onMouseEnter"
      @touchstart.prevent="onTouchStart"
    >
      <slot :open="open" :disabled="disabled">
        <button :disabled="disabled">
          Open
        </button>
      </slot>
    </HMenuButton>

After

    <HMenuButton
      ref="trigger"
      as="div"
      :disabled="disabled"
      :class="ui.trigger"
      role="button"
      @mouseenter="onMouseEnter"
      @touchstart.passive="onTouchStart"
    >
      <slot :open="open" :disabled="disabled">
        <button :disabled="disabled">
          Open
        </button>
      </slot>
    </HMenuButton>