FEAT Customization of the input field (type, autocomplete)

[abasille]

Why?

• The browser can autofill the input field with non-relevant suggestions (e.g. an address suggestion).

• On a mobile device, the default keyboard is displayed whereas we could want a number one or an email keyboard (see Add options for emails #68 ).

• At least one dev wants to hide the input field when maxTags is reached Input/Placeholder should be hidden if maxTags is greater than tags length #115 .

Possible solutions

Sol#1 — Add props to set HTML attributes of the input field

• autocomplete: with a random value, we could disable the browser autofill feature.
• type: 'email', 'number' according to the HTML specs.
• ...all other useful props

Sol#2 — Add a slot to override the default input field

Full-control for the developer.

Preferred solution

For me Sol#2 is the better choice. It brings freedom to the developer.

@JohMun I would like your opinion before coding a PR. Are you still maintain this package? Do you need some help?

[abasille]

Sol#3 (partial solution)

Since v-bind="$attrs" is passed to the input component, attributes different than class, style, type or size can simply be passed to vue-tags-input:

vue-tags-input/vue-tags-input/vue-tags-input.vue

Lines 122 to 145 in 32b8f55

	<input
	ref="newTagInput"
	v-bind="$attrs"
	:class="[createClasses(newTag, tags, validation, isDuplicate)]"
	:placeholder="placeholder"
	:value="newTag"
	:maxlength="maxlength"
	:disabled="disabled"
	type="text"
	size="1"
	class="ti-new-tag-input"
	@keydown="performAddTags(
	filteredAutocompleteItems[selectedItem] || newTag, $event
	)"
	@paste="addTagsFromPaste"
	@keydown.8="invokeDelete"
	@keydown.9="performBlur"
	@keydown.38="selectItem($event, 'before')"
	@keydown.40="selectItem($event, 'after')"
	@input="updateNewTag"
	@blur="$emit('blur', $event)"
	@focus="focused = true; $emit('focus', $event)"
	@click="addOnlyFromAutocomplete ? false : selectedItem = null"
	>

Example:

<vue-tags-input
  [...]
  :autocomplete="new Date().getTime()"
/>

will disable the browser autofill feature.

Drawbacks

The attribute type cannot be overriden.