Skip to content

SelectMenu closes immediately when quickly clicking another SelectMenu while one is open #6511

Description

@k90325248

Environment

  • Operating System: Windows 10.0.26220
  • Node Version: v24.16.0
  • Nuxt Version: 4.4.6
  • CLI Version: 3.35.2
  • Nitro Version: 2.13.4
  • Package Manager: bun 1.3.3
  • Builder: vite 7.3.3

Is this bug related to Nuxt or Vue?

Nuxt

Package

v4.x

Version

v4.4.6

Reproduction

playground

Steps:

  1. Open the first SelectMenu.
  2. Without clicking outside, quickly left-click the second SelectMenu.
  3. The second SelectMenu opens briefly and immediately closes.

Expected:

The first SelectMenu should close, and the second SelectMenu should remain open.

Actual:

The second SelectMenu opens briefly and immediately closes.

Additional observation:

If I press and hold the left mouse button for about 0.2 seconds or longer before releasing it, the second SelectMenu opens normally and stays open.

After successfully opening a SelectMenu by delaying the mouse release, directly clicking another SelectMenu works normally. However, after closing the dropdown and testing again from the initial closed state, the same issue happens again.

Description

Describe the bug

When there are multiple SelectMenu components on the same page, clicking another SelectMenu while one dropdown is already open causes the newly clicked SelectMenu to open and then immediately close.

This only happens when performing a quick left-click, meaning pressing and releasing the mouse button quickly.

If I press and hold the left mouse button for about 0.2 seconds or longer before releasing it, the second SelectMenu opens normally and stays open.

After successfully opening a SelectMenu by delaying the mouse release, directly clicking another SelectMenu works normally. However, after closing the dropdown and testing again from the initial closed state, the same issue happens again.

Steps to reproduce

  1. Open the first SelectMenu.
  2. Without clicking outside, quickly left-click the second SelectMenu by pressing and releasing the mouse button immediately.
  3. Observe that the second SelectMenu opens briefly and immediately closes.

Additional observation:

If I press and hold the left mouse button on the second SelectMenu for about 0.2 seconds or longer before releasing it, the second SelectMenu opens normally and stays open.

After the dropdown is successfully opened this way, directly clicking another SelectMenu works normally. But if the dropdown is closed and the test is repeated again, the same issue occurs again.

Expected behavior

When clicking the second SelectMenu, the first dropdown should close and the second dropdown should remain open.

Actual behavior

The second SelectMenu opens briefly and immediately closes when it is clicked quickly.

If the second SelectMenu is opened successfully by delaying the mouse release, switching directly to another SelectMenu works normally afterward. However, once the dropdown is closed and the test is repeated, the issue occurs again.

Additional context

This issue can be seen in the attached GIF.

In the recording, after opening the first SelectMenu and then quickly clicking the second SelectMenu directly, the second dropdown opens briefly and immediately closes.

This issue affects forms with multiple SelectMenu fields. Users need to click outside first, click the target SelectMenu twice, or press and hold the mouse button briefly before releasing it.

After successfully opening a SelectMenu by delaying the mouse release, directly clicking another SelectMenu works normally. However, after closing the dropdown and testing again from the initial closed state, the same issue happens again.

I also added a small measurement in the reproduction to show the time between pointerdown and pointerup. The issue only appears when this duration is very short.

Image

Logs

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't workingtriageAwaiting initial review and prioritizationv4#4488

    Type

    No type

    Fields

    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions