The input element cannot be clicked twice in a row

[ggwork]

When clicking twice in a row, the datepicker does not respond

[ggwork]

When clicking twice in a row, the datepicker does not respond

when click the input element，the panel show，I select a day。but when i click the input element again，there is nothing happened

[ggwork]

in /datepicker/Datepicker.vue file

and on line 323, it is better to set viewShown.value = 'none' before emit closed method

if (view !== 'none') { emit('opened') } else { emit('closed') } and on line 390 ，the renderView(initialView.value) method is better to use the click method call。 ` const click = () => (isFocused.value = true)

const focus = () => renderView(initialView.value)

const blur = () => {
  isFocused.value = false
  renderView()
}

`

[sorexalpinus]

Quick workaround to this is to watch datepicker value and force re-render when changed:

<template>  
<datepicker
      :key="dpKey"
      v-model="dpValue"
  />
</template>
<script>
import Datepicker from 'vue3-datepicker';
export default {
  components: {Datepicker},
  watch: {
    dpValue: function() {
      this.dpKey++;
    }
  },
  data() {
    return {
      dpValue: null,
      dpKey: 0
    }
  }
}
</script>

[frikoPro]

What I did was to blur the input element after user selects a date.

You need to set a ref value on the datePicker which has a property name InputRef that is the input element. Then when user clicks/selects a date the @closed fires and then I call blur() method on the input element:

<Datepicker
        ref="datePickerEl"
        v-model="selectedDate"
        @closed="onClose"
/>

 const datePickerEl = ref<InstanceType<typeof Datepicker>>();

 const onClose= () => {
    datePickerEl.value?.inputRef?.blur();
  }
};