fatihsolhan / v-onboarding

v-onboarding is a super-slim, fully-typed onboarding component for Vue 3
https://v-onboarding.fatihsolhan.com/
MIT License
164 stars 20 forks source link

Enabling OverlayInteraction does not prevent click events from being blocked #100

Open Wisdawg opened 2 months ago

Wisdawg commented 2 months ago

The bug Setting the options value of preventOverlayInteraction to false allows interaction but doesn't allow the actual click events to occur. This seems to be a bug.

To Reproduce eg. If you instantiate a <VOnboardingWrapper :options="options"> with the options below when the Tour popover appears, other buttons on the screen will be hoverable and clickable, but their actual click events won't fire. ie. Hyperlinks will not route you to a new page.

    const options = {
      overlay: {
        enabled: false,
        preventOverlayInteraction: true,
      },
      hideButtons: {
        previous: false,
        next: true,
        exit: false,
      },
    }

Screenshots It looks like the FocusTrap library is being called on to prevent event propagation: https://github.com/fatihsolhan/v-onboarding/blob/main/src/components/VOnboardingStep.vue#L96 Screenshot 2024-05-01 at 4 41 41 PM

Expected behavior When preventOverlayInteraction is made false interaction AND events become unblocked. Alternatively, if you want to keep interaction blocking separate from event blocking you could introduce a new value in options, perhaps called preventOverlayClickEvents? And if this feature already exists please let me know how to use it.

Desktop (please complete the following information):