How to set a props type with InputHTMLAttributes?

[lucas-santosP]

For example, having a custom input component, when using it I want to have full autocompletion with all input props that are already defined by InputHTMLAttributes. Is possible to achieve that or will I have to type each prop I'm expecting to use?

The example below (with an expected error) illustrates what I'm trying to achieve here:

<script lang="ts" setup>
import { InputHTMLAttributes } from "vue";

const props = defineProps<InputHTMLAttributes>();
const emit = defineEmits<{ (e: "input", value: string): void }>();
</script>

<template>
  <div>
    <input
      type="text"
      v-bind="props"
      @input="(e) => emit('input', (e.target as HTMLInputElement).value)"
    />
    />
  </div>
</template>

Then using it:

<InputSearch :value="input" @input="(value) => (input= value)" placeholder="Search here..." />

[edison1105]

see #4294

[rudyxu1102]

Related to vuejs/rfcs#477

[felix-dolderer]

So this should work now using Vue 3.3, correct?

When I try exactly this syntax using Vue 3.3 I get an error Cannot read properties of undefined (reading 'sys'). Code:

import { InputHTMLAttributes } from "vue";

const props = defineProps<InputHTMLAttributes>();

However if I do destructured assignment (defineProps<{ p: InputHTMLAttributes }>();) it works just fine, but using it is not that nice:
<UiInput :p="{ placeholder: 'Hello' }" />

This workaround worked for me (still not pretty, but at least I can use it the way I want)

import { InputHTMLAttributes } from "vue";
interface X extends /* @vue-ignore */ InputHTMLAttributes {}

const props = defineProps<X>();

@lucas-santosP have you tried this since the release of Vue 3.3?