Skip to content

USelect fails to close on click when it (or one of its parents) has pointer-events classes applied #6752

Description

@theodol59

Environment

Operating system: Windows 10.0.26200
Node.js version: v26.5.0
Nuxt version: 4.4.8
Nuxt/ui version: ^4.10.0

Is this bug related to Nuxt or Vue?

Nuxt

Package

v4.x

Version

v4.10.0

Reproduction

https://play.ui.nuxt.com/#eNq9UU1LxDAQ/StDLlWw9uBt7QqKF2+CigfrIabTGkwzIZkUYdn/blq7kVVQ8LC5zEfey3uPbMSlc6djRLESdVBeO4aAHB0Yaft1Izg04qKxenDkGTbgsYMtdJ4GKBKtOG+sIhsYNOMQYD0Bjp6KK6neDPXFCRT31NJUbyzceuo9hjCN12SxeD7O/FGaiAs/06fruvr0lVykIak4IxnTBFC3egRlZAjJ6VCeQWfwHXrplrZUZGb7kM4EXlqAR82vFBleYr/a7fYADdcPd2hQJWflQC2aJDF7bASs5rBpMde0qDKvrr5e2eu/q/+QzkEcacvoSxzRcihlZMohZvCBjf1T+tc4fxrbdXWVf1xsPwD+edY2

Description

I noticed that if USelect or one of its parent elements has the pointer-events-auto class applied, USelect sometimes fails to close when clicked.

To reproduce, click each USelect component ~ 10 times in the provided URL. The first USelect closes correctly every time. The other two USelect components close inconsistently — sometimes they close, and sometimes they appear to reopen immediately after closing, which is not the expected behavior.

Additional context

I have a map application with a div overlay that has pointer-events-none applied. Inside this overlay, I have a USelect component with pointer-events-auto. This is a common use case, but USelect behaves unreliably in this scenario.

Logs

Metadata

Metadata

Assignees

No one assigned

    Labels

    triageAwaiting initial review and prioritization

    Type

    Fields

    No fields configured for Bug.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions