Headlessui/vue Popover prevents the click on child element and unable to open the Select dropdown. #3055
Unanswered
Aravinda93
asked this question in
Help
Replies: 2 comments 3 replies
-
Hey! Can you share a minimal reproduction repo where everything is setup already? |
Beta Was this translation helpful? Give feedback.
3 replies
-
@RobinMalfait If you get a chance can you please have a look at the issue related to the dropdown option not showing up and provide some solution? I have added issue reproduction in CodeSandBox. |
Beta Was this translation helpful? Give feedback.
0 replies
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
I am using the
Field
fromvee-validate
which displays the select dropdown options. I want to add aPopoverPanel/Popover
from@headlessui/vue
to display some tooltip information on hovering over the Field so I have created a generic component which wraps the vee-validate Field.After adding
Popover
I cannot select an option fromvee-validate Field
. I want the feature to get the tooltip menu when I hover over thevee-validate
Select Field but when I click on thevee-validate Field
I want to select any options just like any other Select dropdown.Sample CodeSandBox link for reproducing the issue.
Following is the code I have in my
Nuxt 3
application:components/GenericTooltip.vue
:Following is its usage and wrapping the
vee-validate
Field component:components/HoverMenuTest.vue
:Following is their usage in
pages/Test.vue
:The following GIF shows that when I hover over the Field I can get the tooltip information as I want but when clicking on the Field I cannot get any dropdown options.
If I remove the
<GenericTooltip>
wrapping inHoverMenuTest.vue
for thevee-validate Field
, it works fine and can select the required options. I want thisGenericToolTip.vue
component as I plan to reuse it in multiple places rather than copying the code.I tried adding the @click.stop to my PopoverButton:
But this is also not working and I am still unable to see dropdown options.
Beta Was this translation helpful? Give feedback.
All reactions