refactor(VRipple): Use PointerEvent to fix some bugs

[Jesse205]

Description

fixes #21468

In newer browsers, PointerEvent can be used instead of MouseEvent and TouchEvent.

Compatibility list: https://caniuse.com/?search=PointerEvent

---

Changes

• fixes [Bug Report][3.8.6] When a button is touched, the ripple effect cannot be triggered by a mouse click. #21468
• I also fixed a bug that existed in previous versions where pressing and holding two keys simultaneously and then releasing them would cause the ripple effect not to disappear.
• I also made the ripple effect caused by pressing multiple keys into a single ripple.
• I replaced KeyboardEvent.keyCode with the updated KeyboardEvent.key and fixed an error in keyValues.
• I also took the opportunity to fix a bug where the ripple effect would still appear when scrolling the page, making it consistent with Android's behavior.

New Bugs

• refactor(VRipple): Use PointerEvent to fix some bugs #21469 (comment)

Markup:

<template>
  <v-container
    :style="{
      touchAction: isScrollable ? 'manipulation' : 'none',
    }"
  >
    <div
      :style="{
        position: 'sticky',
        top: 0,
        backgroundColor: current.colors.background,
        zIndex: 1,
      }"
    >
      <v-switch v-model="isScrollable" label="Scrollable" color="primary" />
    </div>

    <v-row>
      <v-col cols="12">
        <v-card v-ripple @click="count++" style="user-select: none;">
          <v-card-text>Count: {{ count }}</v-card-text>
          <v-card-actions>
            <v-btn @click.stop>Button with ripple</v-btn>
          </v-card-actions>
        </v-card>
      </v-col>
      <v-col cols="12">
        <v-card v-ripple>
          <v-card-text>
            Outer card with ripple
            <v-card-actions>
              <v-card v-ripple.stop>
                <v-card-text>
                  Inner card with <code>ripple.stop</code>
                </v-card-text>
              </v-card>
            </v-card-actions>
          </v-card-text>
        </v-card>
      </v-col>
    </v-row>

    <div>
      <v-btn
        v-ripple
        v-for="item in 500"
        text="Edit Profile"
        variant="text"
        style="border: none; border-radius: initial"
      />
    </div>
  </v-container>
</template>

<script setup>
import { useTheme } from "@/composables";
import { ref } from "vue";
const isScrollable = ref(true);
const count = ref(0);
const { current } = useTheme();
</script>

[KaelWD]

We don't support anything without PointerEvent anyway: https://vuetifyjs.com/en/getting-started/browser-support/
The ripple code is all ancient, I think the last big change was in like 2018.

[Jesse205]

• I have removed the code related to mouse events and touch events.
• I also fixed a bug that existed in previous versions where pressing and holding two keys simultaneously and then releasing them would cause the ripple effect not to disappear.
• I also made the ripple effect caused by pressing multiple keys into a single ripple.
• I replaced KeyboardEvent.keyCode with the updated KeyboardEvent.key and fixed an error in keyValues.
• I also took the opportunity to fix a bug where the ripple effect would still appear when scrolling the page, making it consistent with Android's behavior.

---

I am not familiar with Vitest, and I don't know how to fix the tests. I hope you can help me.

[J-Sek]

It would need to be verified on an actual device, but when simulating the pinch-zoom (holding shift when moving the pointer in Chrome DevTools mobile emulation)... there is a minor regression because ripple is triggered (previously it was not).

[Jesse205]

It would need to be verified on an actual device, but when simulating the pinch-zoom (holding shift when moving the pointer in Chrome DevTools mobile emulation)... there is a minor regression because ripple is triggered (previously it was not).

@J-Sek I believe this is a bug in Chromium. I tested Edge, Chrome, and Cent Browser on Windows. When simulating a device, holding down the shift key and moving the mouse does not trigger pointercancel; instead, it continues to respond to pointermove events.

Fortunately, Chromium on Android does not have this issue. I tested Edge, Chrome, and Cromite on Android, and when scaling begins, they stop responding to pointermove and correctly trigger pointercancel. Therefore, as long as the time between pressing and starting scaling is short enough (less than DELAY_RIPPLE), the ripple effect will not appear.

Firefox on Android also does not have this issue, as it responds with a pointermove followed by pointercancel when two fingers are pressed, so there is no problem in this scenario either.

The previous code worked correctly because it cancels the animation as soon as touchmove is triggered. This coincidentally prevented the ripple effect from appearing when simulating mobile device scaling in Chromium on Windows.

---

After testing again, I found that there is a certain probability of triggering the ripple effect during mobile scaling. One solution is to increase the DELAY_RIPPLE duration, but this would make the delay of the ripple appearance more noticeable during press actions.

[J-Sek]

Thanks for putting the time for manual verification. Once E2E tests are green I will double-check and we should be ready for merge.