Property 'onInputClick' does not exist on type { $props: DatePickerProps & VNodeProps }

[martinszeltins]

Vue version

3.5.13

Link to minimal reproduction

https://stackblitz.com/~/github.com/martinszeltins/template-ref-test

Steps to reproduce

I wanted to use useTemplateRef on a component instance but I am getting this type error:

app.vue:18:85 - error TS2339: Property 'onInputClick' does not exist on type '{ $props: DatePickerProps & VNodeProps & AllowedComponentProps & ComponentCustomProps; $slots: DatePickerSlots; $emit: ((e: "update:modelValue", value: Date | ... 3 more ... | undefined) => void) & ... 11 more ... & ((e: "keydown", event: Event) => void); }'.

18  console.log('datePickerEl.value.onInputClick', toRaw(datePickerEl.value.onInputClick)) // ƒ onInputClick()

What is interesting is that the function onInputClick actually does exist on the Date Picker and it works too. But my IDE and type checker throws an error. I also tried to use ComponentPublicInstance but that didn't work either.

app.vue

<template>
    <div>
        <DatePicker ref="datePickerEl" v-model="date" />
        <button @click="showDatePicker">Show Datepicker!</button>
    </div>
</template>

<script setup lang="ts">
    import DatePicker from 'primevue/datepicker'

    const date = ref()

    const datePickerEl = useTemplateRef('datePickerEl')
    // const datePickerEl = useTemplateRef<ComponentPublicInstance<typeof DatePicker>>('datePickerEl')

    const showDatePicker = () => {
        if (datePickerEl.value) {
            console.log('datePickerEl.value.onInputClick', toRaw(datePickerEl.value.onInputClick)) // ƒ onInputClick()

            datePickerEl.value.onInputClick() // this opens the date picker
        }
    }
</script>

What is expected?

It should properly recognize the type that datePickerEl is a component instance of DatePicker which has functions that can be called.

What is actually happening?

Getting type error

System Info

`
System:
    OS: Linux 5.15 Ubuntu 20.04.6 LTS (Focal Fossa)
    CPU: (12) x64 Intel(R) Core(TM) i7-10750H CPU @ 2.60GHz
    Memory: 22.18 GB / 31.13 GB
    Container: Yes
    Shell: 5.8 - /usr/bin/zsh
  Binaries:
    Node: 20.12.2 - ~/.nvm/versions/node/v20.12.2/bin/node
    Yarn: 1.22.19 - /usr/bin/yarn
    npm: 10.5.0 - ~/.nvm/versions/node/v20.12.2/bin/npm
    pnpm: 9.15.0 - ~/.local/share/pnpm/pnpm
    bun: 1.0.26 - ~/.bun/bin/bun
  Browsers:
    Chrome: 124.0.6367.60
  npmPackages:
    vue: latest => 3.5.13
`

Any additional comments?

No response

[absidue]

Likely related to vuejs/language-tools#5166.

If you remove the on prefix it might just start working.

[edison1105]

I think there is an issue with the type definition of DatePicker
see demo

[martinszeltins]

@edison1105 I think you're right, it looks like a PrimeVue DatePicker bug. Thanks!