fix(VRipple): hide ripple on blur

[inottn]

Description

fixes #13189

In this issue, active element is changed in the keydown event, so the button`s keyup event is not triggered. As a result, ripple is not hidden.

The keyup event can only be triggered at the focused element. So we can hide ripple when target loses focus.

Motivation and Context

fixes #13189

How Has This Been Tested?

add unit test case

Markup:

// Paste your FULL Playground.vue here
<template>
  <v-container>
    <v-btn v-ripple>keep pressing</v-btn>
    <v-dialog
      v-model="dialog"
      width="500"
    >
      <template #activator="{ on, attrs }">
        <v-btn
          color="red lighten-2"
          dark
          v-bind="attrs"
          v-on="on"
        >
          Click Me
        </v-btn>
      </template>

      <v-card>
        <v-card-title class="headline grey lighten-2">
          Lorem
        </v-card-title>

        <v-card-text>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </v-card-text>

        <v-divider></v-divider>

        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn
            color="primary"
            text
            @click="dialog = false"
          >
            Cancel
          </v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
  </v-container>
</template>

<script>
  export default {
    data: () => ({
      dialog: false,
    }),
  }
</script>

Types of changes

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• Improvement/refactoring (non-breaking change that doesn't add any features but makes things better)

Checklist:

• The PR title is no longer than 64 characters.
• The PR is submitted to the correct branch (master for bug fixes and documentation updates, dev for new features and backwards compatible changes and next for non-backwards compatible changes).
• My code follows the code style of this project.
• I've added relevant changes to the documentation (applies to new features and breaking changes in core library)

[johnleider]

What does this PR solve that #13262 does not?

[inottn]

@johnleider Run code of #13262, has a problem when keep pressing

[yuwu9145]

@johnleider Run code of #13262, has a problem when keep pressing

Thanks @inottn for pointing it out. However, gif in previous comment is bit vague, would you mind providing a more concise steps to reproduce, so that I will be able to see if I could resolve and also evaluate which solution is the best to tackle this issue?

In addition, before making a new pull request to resolve the same cause, you could add comment to #13262 if you found anywhere needs to be improved. I am happy and very open to discuss.

[johnleider]

Closing in favor of #13262

If you have any additional questions, please reach out to us in our Discord community.