Skip to content
New issue

Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? # to your account

fix(VSnackbar): handle pointerleave event after transition ends #20312

Merged

Conversation

huynhtehoa
Copy link
Contributor

@huynhtehoa huynhtehoa commented Aug 10, 2024

Description

fixes #20306

  • Problem: When hovering over SnackBar, isHovering is truthy as expected but closing SnackBar does not fire onPointerLeave => isHovering is still truthy after the component is closed.
    And due to this condition !isHovering && <VProgressLinear> from VSnackBar.tsx:239, the ProgressBar does not appear when reopening the SnackBar.

  • Cause: I found that this causes by the transition duration/delay from MaybeTransition in VOverlay. Therefore, I think that hover state should be correctly handled after the transition ends, which is addressed in this PR.

Markup:

I reuse the example from #20306

<template>
  <div class="text-center">
    <v-btn color="orange-darken-2" @click="snackbar = true">
      Open Snackbar
    </v-btn>

    <v-snackbar v-model="snackbar" :timeout="timeout" timer>
      {{ text }}

      <template v-slot:actions>
        <v-btn color="blue" variant="text" @click="snackbar = false">
          Close
        </v-btn>
      </template>
    </v-snackbar>
  </div>
</template>

<script>
  export default {
    data: () => ({
      snackbar: false,
      text: 'My timeout is set to 2000.',
      timeout: 2000,
    }),
  }
</script>

@KaelWD KaelWD added this to the v3.6.x milestone Aug 13, 2024
@KaelWD KaelWD merged commit d25879a into vuetifyjs:master Aug 13, 2024
9 of 10 checks passed
@huynhtehoa huynhtehoa deleted the fix/progressbar-of-snackbar-disappears branch August 13, 2024 08:46
# for free to join this conversation on GitHub. Already have an account? # to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[Bug Report][3.6.14] Snackbar reopens without Progress Bar after interruption
2 participants