[Bug Report][2.6.7] Date picker Dialog and menu

[yuxinli915]

Environment

Vuetify Version: 2.6.7 Vue Version: 2.7.7 Browsers: Edge 103.0.1264.62 OS: Mac OS 10.15.7

Steps to reproduce

1. Move cursor to the edge of the text field.
2. When cursor becomes text but not pointer
3. Perform click.

Expected Behavior

Date picker should be activated when user clicks anywhere on the text field.

Actual Behavior

You will need to have the cursor becomes pointer then to click to see the picker been activated.

Reproduction Link

https://codepen.io/superxin915/pen/xxWqBKp?editors=101

[denkus]

This issue is probably a duplicate of #14770. @yuxinli915 There are two workarounds suggested in #14770. Using a wrapping span worked for me.

[wyhsunflower]

This issue is probably a duplicate of #14770. @yuxinli915 There are two workarounds suggested in #14770. Using a wrapping span worked for me.

Hi, this doesn't work if using disabled attribute. Means disabled in v-text-field component but still can be clickable.

[alx-bd]

Hi, this doesn't work if using disabled attribute. Means disabled in v-text-field component but still can be clickable.

Assuming you're using a variable to set the input as disabled something like this should do the trick:

<template v-slot:activator="{ on, attrs }">
    <span v-bind="attrs" v-on="var1 ? null : on">
      <v-text-field
        :disabled="var1"
        ...
      ></v-text-field>
    </span>
</template>

This way the activator is not triggered anymore. This might not be the nicest solution but it works for me. 😅

[jacekkarczmarczyk]

Duplicate of #14770