Suggestion: Ability to use a component for the text input

[mattgreenfield]

I have a library of components, including a text input. It would be nice if I could use this instead of having to style the current input to match.

The nicest way would be to do this via slots.

Is this something you would consider? I'm happy to have a look and submit a PR.

Thanks,

[darrenjennings]

@mattgreenfield yes I am open to this idea. We are recently adding a special <Input> component to our own design library internally at my day job so interested as well.

There could be some issues with making sure it binds correctly to all the properties. With slots there is the drawback that you have to pass a ton of required internal scope-slot props:

vue-autosuggest/src/Autosuggest.vue

Lines 4 to 17 in 458f3e2

	:type="inputProps['type'] ? inputProps['type'] : 'text'"
	:value="internalValue"
	:autocomplete="inputProps.autocomplete"
	role="combobox"
	:class="[isOpen ? 'autosuggest__input--open' : '', inputProps['class']]"
	v-bind="inputProps"
	aria-autocomplete="list"
	aria-owns="autosuggest__results"
	:aria-activedescendant="isOpen && currentIndex !== null ? `autosuggest__results-item--${currentIndex}` : ''"
	:aria-haspopup="isOpen ? 'true' : 'false'"
	:aria-expanded="isOpen ? 'true' : 'false'"
	@input="inputHandler"
	@keydown="handleKeyStroke"
	v-on="listeners"

It's possible that you could make this <component :is="inputProps.tag" which would then allow users to pass the tag they want. We already have inputProps and any listeners already bind to the <input> so if your special input component has any strange props or needs this should work with minimal effort. inputProps could have "tag" similar to how vue-router implements it, though there is an RFC that discusses the benefits/drawbacks of the tag prop WRT slots. I think they have less slot properties than we do especially concerning aria-attributes, and they do not already have an API for binding properties and listeners to their anchor tag so I think it is OK for vue-autosuggest to have another custom inputProps property called tag. Open to discussion, but PR is welcome!