vue-tailwind icon indicating copy to clipboard operation
vue-tailwind copied to clipboard

Datepicker Error on focus

Open thomas4Bitcraft opened this issue 4 years ago • 3 comments

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 avatar Sep 13 '21 19:09 thomas4Bitcraft

Really nobody?

thomas4Bitcraft avatar Sep 20 '21 14:09 thomas4Bitcraft

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

hjJunior avatar Dec 22 '21 00:12 hjJunior

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();

kal avatar Jun 06 '22 08:06 kal