How to disable pointer event blocking when opening select dropdowns or dropdown menus.
Hello!
Using NuxtUI v3.2, I noticed when using the Select, or DropdownMenu components, when you open the select dropdown or the dropdown menu, the
<body> gets a pointer-events: none style to it, along with hiding the overflow. While this is the expected behavior for Modal and Dialog components with overlay, this is kind of a strange feature for a simple dropdown. The user cannot hover or click on anything else, and the page is unscrollable while a select menu is open.
Is there a way to turn this behaviour off, but still keep this functionality for real overlay components like modals and slide-overs?6 Replies
Hi @Razuro. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
Based on the information in the knowledge sources, you can control pointer event blocking for dropdowns and select menus in Nuxt UI by using the disableOutsidePointerEvents prop (or similar) on the relevant components.
For components like SelectMenu, InputMenu, LocaleSelect, and ColorModeSelect, the prop disableOutsidePointerEvents is available in the content prop options. By default, this is not set to true, but if you find that pointer events are being blocked, you should ensure this prop is set to false.
For example, with SelectMenu:
Or for DropdownMenu, while the prop is not named exactly the same, the content prop does not mention pointer event blocking, and there is no indication in the documentation that pointer events are blocked by default for DropdownMenu. If you are experiencing this, it may be due to a global configuration or a bug.
Summary:
- For SelectMenu, InputMenu, LocaleSelect, and ColorModeSelect, set
- SelectMenu Props - InputMenu Props - LocaleSelect Props - ColorModeSelect Props If you want to keep this behavior for modals and dialogs, simply do not set this prop (or set it to true) for those components, as their default is to block pointer events outside the modal, which is the expected behavior. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
- For SelectMenu, InputMenu, LocaleSelect, and ColorModeSelect, set
disableOutsidePointerEvents: false in the content prop to prevent pointer event blocking when the dropdown is open.
- For DropdownMenu, the documentation does not mention pointer event blocking, so if you see this behavior, double-check your configuration or consider reporting it.
References:- SelectMenu Props - InputMenu Props - LocaleSelect Props - ColorModeSelect Props If you want to keep this behavior for modals and dialogs, simply do not set this prop (or set it to true) for those components, as their default is to block pointer events outside the modal, which is the expected behavior. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
<@154307652300701698> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
@kapa.ai SelectMenu and InputMenu works fine actually, those do not block pointer events by default, it's the Select and DropdownMenu components that behave this way. And this option is not available on their content prop.
Let me check the knowledge base for you again. One moment! :books:
----------------------
Thank you for clarifying. Based on the knowledge sources provided, the
There is no documented prop or option to disable pointer event blocking for
If this is problematic, consider reaching out to the Nuxt UI maintainers for clarification or a possible enhancement. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
Select and DropdownMenu components do not document a disableOutsidePointerEvents option in their content prop. The available content options for these components focus on positioning, alignment, collision handling, and related behaviors, but there is no mention of a prop to control pointer event blocking or body locking for these components.
For example, the documented content props for Select include options like side, sideOffset, align, avoidCollisions, and others, but nothing related to pointer event blocking or disabling pointer events on the <body> element. The same applies to DropdownMenu—the content prop does not include such an option, nor is there any mention of this behavior in the official documentation for these components Select Props DropdownMenu Props.
Therefore, based on the current documentation, there is no officially documented way to disable pointer event blocking or body locking for the Select and DropdownMenu components in Nuxt UI v3.2. This behavior may be by design or could be an oversight. If this is causing issues in your application, you may want to consider opening an issue or feature request with the Nuxt UI team.
If you need more granular control, you might need to look for a workaround or wait for an update that exposes this configuration.
Summary:There is no documented prop or option to disable pointer event blocking for
Select and DropdownMenu in Nuxt UI v3.2, according to the current knowledge sources.If this is problematic, consider reaching out to the Nuxt UI maintainers for clarification or a possible enhancement. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
<@154307652300701698> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
I wonder if this really is intentional.
Upon further investigation this is a "feature" of Reka UI not NuxtUi itself. Looking at the discussions on the web, this might be an intentional design choice. A little strange in my opinion.
If anyone else is looking for a workaround:
- For Select you can add the
:content="{bodyLock: false}" prop.
- For the DropdownMenu you can add :modal="false" prop.
For enabling pointer events you can add body { pointer-events: auto !important } in your main CSS. Note that this might break some other functionality especially with modals. You can also add it conditionally in Javascript when you open a menu or a select.