SelectMenu onBlur selects first item when searchable is true

[Flowko]

Environment

• Operating System: Windows_NT
• Node Version: v20.4.0
• Nuxt Version: 3.10.3
• CLI Version: 3.10.1
• Nitro Version: 2.8.1
• Package Manager: [email protected]
• Builder: -
• User Config: devtools, typescript, extends, css, vite, modules, build, colorMode, googleFonts, image, content
• Runtime Modules: @nuxt/[email protected], @nuxt/[email protected], [email protected], [email protected], radix-vue/nuxt, @nuxthq/[email protected], [email protected]
• Build Modules: -

Version

@nuxt/ui-pro v1.0.2

Reproduction

1. Add a SelectMenu with the searchable prop set to true
2. No value is yet selected in the SelectMenu
3. Open the menu
4. Click outside the menu to cancel the selection
5. The first item will be selected now

The issue can easily be reproduced with the example from the docs.

Description

When using the SelectMenu with searchable set to true, the first item is selected when clicking outside the menu.

If the selection is cancelled by pressing the esc key the issue does not occur.

seems like this issues still prisists #1252

Additional context

No response

Logs

No response

[madnadyka]

Have the same issue

[sandros94]

Instead of opening a new issue you could have more simply commented on that one you linked, but yes as described in the upstream issue this seems by design.

I imagine this being an accessibility issue, since the original intent was that you should use the accessibility navigation buttons to cancel the operation rather then clicking away. Although I also agree with the concept of "clicking away without explicitly selecting something" should also be considered as "canceling the operation".

Since the current rewrite of ui v3.0 (follow updates in #1289) does have the aim of dropping the support of headlessui in favour of radix-vue I would suggest to close this issue and comment on the upstream one.

[benjamincanac]

As mentioned in #1252, it's an issue upstream in Headless UI, I had to remove the pinned version of Headless UI at some point which brought back this issue. Unfortunately, we can't do much about it and as @sandros94 said this will be fixed in v3 with the upgrade to radix-vue.