alfonsobries / vue-tailwind

Vue UI components with configurable classes ready for TailwindCSS
https://www.vue-tailwind.com/
MIT License
2.16k stars 137 forks source link

Datepicker Error on focus #226

Open thomas4Bitcraft opened 3 years ago

thomas4Bitcraft commented 3 years ago

There is an error when trying to manually type in the date:

TypeError: Cannot read properties of undefined (reading 'focus')
    at VueComponent.focusTimePicker (t-datepicker.js?0e0b:4180)
    at keydown (t-datepicker.js?0e0b:4455)
    at invokeWithErrorHandling (vue.runtime.esm.js?2b0e:1863)
    at Proxy.invoker (vue.runtime.esm.js?2b0e:2188)
    at invokeWithErrorHandling (vue.runtime.esm.js?2b0e:1863)
    at Proxy.Vue.$emit (vue.runtime.esm.js?2b0e:3903)
    at keydown (t-datepicker.js?0e0b:1514)
    at invokeWithErrorHandling (vue.runtime.esm.js?2b0e:1863)
    at HTMLInputElement.invoker (vue.runtime.esm.js?2b0e:2188)
    at HTMLInputElement.original._wrapper (vue.runtime.esm.js?2b0e:6961)

Here is my component:

<t-datepicker
        v-model="userData.birthday"
        :placeholder="$t('user.birthday')"
        name="birthday"
        class="w-full"
        userFormat="d.m.Y"
        dateFormat="Y-m-d"
        initialDate="2000-01-01"
        initialView="year"
        :maxDate="new Date()"
        :clearable="false"
        :timepicker="false"
      />

Anybody already had this issue and is there maybe a workaround?

thomas4Bitcraft commented 3 years ago

Really nobody?

hjJunior commented 2 years ago

I can reproduce it, seems to happen when you press a key

kal commented 2 years ago

I have the same error I think. It looks like the cause is this line: https://github.com/alfonsobries/vue-tailwind/blob/7ff9278d66a8b75234fbfedcd6dc1ed1c51f50cf/src/components/TDatepicker.ts#L573

If you have no timepicker then $refs.timePicker is null leading to the error. A simple fix would be to change the line to

      (this.$refs.timePicker as TimePicker)?.focus();