[Bug]: DOM refs are not working on Input component

[devberkay]

Environment

Developement/Production OS: Windows 10 19043.1110
Node version: 16.0.0
Package manager: [email protected]
Radix Vue version: 1.0.0
Shadcn Vue version: 1.0.0
Vue version: 3.0.0
Nuxt version: 3.0.0
Nuxt mode: universal
Nuxt target: server
CSS framework: [email protected]
Client OS: Windows 10 19043.1110
Browser: Chrome 90.0.4430.212

Link to minimal reproduction

In shortly

Steps to reproduce

<script setup lang="ts">
const el = ref<HTMLInputElement | null>(null)
</script>

<template>
  <Input ref="el" />
</template>

Describe the bug

My aim is to set cursor position offset for an input tag
I am getting following error when i use DOM refs on Input component. and call a function of that HTMLElement:

value.setSelectionRange is not a function

Expected behavior

No response

Conext & Screenshots (if applicable)

No response

[devberkay]

I have found the solution from vuejs docs. Since this is a child component you need to expose native input tag's DOM ref using defineExpose() function. https://vuejs.org/api/sfc-script-setup.html#defineexpose

Here is how the altered Input component looks after i added defineExpose():

<script setup lang="ts">
import { useAttrs } from 'vue'
import { useVModel } from '@vueuse/core'
import { cn } from '@/lib/utils'

const domRef = ref<HTMLInputElement | null>(null)

defineExpose({
  domRef
})

defineOptions({
  inheritAttrs: false,
})

const props = defineProps<{
  defaultValue?: string | number
  modelValue?: string | number
}>()

const emits = defineEmits<{
  (e: 'update:modelValue', payload: string | number): void
}>()

const { class: className, ...rest } = useAttrs()

const modelValue = useVModel(props, 'modelValue', emits, {
  passive: true,
  defaultValue: props.defaultValue,
})
</script>

<template>
  <input ref="domRef" v-model="modelValue" :class="cn('flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50', className ?? '')" v-bind="rest">
</template>

I am going to close this as completed since i don't think this is a bug rather it is a design decision by the shadcn-vue maintainers.

[sadeghbarati]

Related rfcs

vuejs/rfcs#258