feat(VOverlay): add open-on-touch prop

[J-Sek]

fixes #17640

Note: disabling touch for open-on-hover was a conscious decision b86d05b, so we need additional prop

Alternatives:

• drop the guard from b86d05b, but let users opt-out with open-on-hover="no-touch"
• make open-on-touch computed, true when open-on-hover is true, letting people opt-out with :open-on-touch="false"

Markup:

<template>
  <v-app theme="dark">
    <v-container>

      <div class="text-center">
        <v-menu open-on-hover open-on-touch>
          <template #activator="{ props }">
            <v-btn color="primary" v-bind="props"> Dropdown </v-btn>
          </template>

          <v-list>
            <v-list-item v-for="(item, index) in items" :key="index">
              <v-list-item-title>{{ item.title }}</v-list-item-title>
            </v-list-item>
          </v-list>
        </v-menu>
        <br />
        <br />
        <v-menu open-on-hover>
          <template #activator="{ props }">
            <v-text-field color="primary" v-bind="props" />
          </template>

          <v-list>
            <v-list-item v-for="(item, index) in items" :key="index">
              <v-list-item-title>{{ item.title }}</v-list-item-title>
            </v-list-item>
          </v-list>
        </v-menu>
      </div>

    </v-container>
  </v-app>
</template>

<script setup>
  const items = [
    { title: 'Click Me' },
    { title: 'Click Me' },
    { title: 'Click Me' },
    { title: 'Click Me 2' },
  ]
</script>

[KaelWD]

I think it's better to just revert b86d05b, can revisit this if we ever figure out why that was needed.

[KaelWD]

For future reference:

<template>
  <v-app>
    <v-container>
      <div style="height:500px" />

      <v-btn>
        Tooltip
        <v-tooltip activator="parent" text="tooltip" />
      </v-btn>

      <v-btn>
        Menu
        <v-menu activator="parent" open-on-focus open-on-hover>
          <v-list>
            <v-list-item link>Close</v-list-item>
            <v-list-item @click.stop>Don't close</v-list-item>
          </v-list>
        </v-menu>
      </v-btn>

      <v-btn>
        Menu+tooltip
        <v-tooltip :open-on-touch="false" activator="parent" location="bottom" text="tooltip" />
        <v-menu activator="parent">
          <v-list>
            <v-list-item link>Close</v-list-item>
            <v-list-item @click.stop>Don't close</v-list-item>
          </v-list>
        </v-menu>
      </v-btn>

      <v-btn>
        Nested Menu
        <v-menu activator="parent" open-on-hover>
          <v-list>
            <v-list-item link>
              Submenu
              <v-menu activator="parent" open-on-hover submenu>
                <v-list>
                  <v-list-item link>Close</v-list-item>
                  <v-list-item @click.stop>Don't close</v-list-item>
                </v-list>
              </v-menu>
            </v-list-item>
            <v-list-item @click.stop>Don't close</v-list-item>
          </v-list>
        </v-menu>
      </v-btn>

      <div style="height:500px" />
    </v-container>
  </v-app>
</template>