When using datePicker in vuetify vDialog, selecting the date will trigger the close popup event

[guxuerui]

Development Relevant Information:

• BalmUI version: 10.4.0
• Vuetify version: 3.0.0-beta.4
• Browser: chrome
• Operating System: MacOc Monterey 12.3

Description: Selecting a date in a popup will generate a jitter that triggers an event to close the popup, which cannot be disabled

Steps To Reproduce:

1. Selecting the date in the dialog
2. After selecting the date, the pop-up window closes automatically

[elf-mouse]

Hi @guxuerui , this is related to UI design compatibility/scalability and scrim event.

• First, let's look at the official MDC design practices together

  <ui-button @click="open = true">Open Dialog</ui-button>
  
  <ui-dialog ref="dialog" v-model="open" mask-closable>
    <ui-dialog-content>
      <!-- <ui-datepicker></ui-datepicker> -->
      <input id="date" />
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
        eiusmod tempor incididunt ut labore et dolore magna aliqua.
      </p>
    </ui-dialog-content>
  </ui-dialog>

  import flatpickr from 'flatpickr';
  
  export default {
    data() {
      return {
        open: false
      };
    },
    watch: {
      open(val) {
        if (val) {
          this.$refs.dialog.$nextTick(() => {
            flatpickr('#date', {});
          });
        }
      }
    }
  };

It looks good. No problem.

• Then, let's try v-dialog

  <ui-button @click="open = true">Open Dialog</ui-button>
  
  <v-dialog ref="dialog" v-model="open">
    <v-card>
      <v-card-text>
        <!-- <ui-datepicker :config="config"></ui-datepicker> -->
        <input id="date" />
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
          eiusmod tempor incididunt ut labore et dolore magna aliqua.
        </p>
      </v-card-text>
    </v-card>
  </v-dialog>

  import flatpickr from 'flatpickr';
  
  export default {
    data() {
      return {
        open: false,
        config: {
          static: true
        }
      };
    },
    watch: {
      open(val) {
        if (val) {
          this.$refs.dialog.$nextTick(() => {
            flatpickr('#date', {});
          });
        }
      }
    }
  };

By looking at the DOM rendering, it is easy to see that both flatpickr and v-dialog append to body by default,
So it leads to event penetration to scrim element.

Here are two relatively good solutions:

1. v-dialog: need to add event compatibility or control attributes for scrim elements
2. flatpickr: use static: true config, but you need to adjust the container of v-dialog overflow: visible

Hope it can help you. Thanks :)

[guxuerui]

OK 我懂了！我也发现了，它们确实是同时渲染的，感谢您提供的解决思路，我再试试！

[guxuerui]

第二个办法解决了我的问题，感谢~

[elf-mouse]

不客气~