vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Fixed float label issues with AutoComplete

pull/358/head
cagataycivici 2020-07-03 11:25:01 +03:00
parent 6042ad55b5
commit 1cfc3e55bc
1 changed files with 9 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
src/components/autocomplete/AutoComplete.vue
View File

@ -8,7 +8,8 @@
<span class="p-autocomplete-token-icon pi pi-times-circle" @click="removeItem($event, i)"></span> <span class="p-autocomplete-token-icon pi pi-times-circle" @click="removeItem($event, i)"></span>
</li> </li>
<li class="p-autocomplete-input-token"> <li class="p-autocomplete-input-token">
<input ref="input" type="text" autoComplete="off" v-bind="$attrs" v-on="listeners" role="searchbox" aria-autocomplete="list" :aria-controls="listId" :aria-labelledby="ariaLabelledBy"> <input ref="input" type="text" autoComplete="off" v-bind="$attrs" v-on="listeners"
role="searchbox" aria-autocomplete="list" :aria-controls="listId" :aria-labelledby="ariaLabelledBy">
</li> </li>
</ul> </ul>
<i class="p-autocomplete-loader pi pi-spinner pi-spin" v-if="searching"></i> <i class="p-autocomplete-loader pi pi-spinner pi-spin" v-if="searching"></i>
@ -85,8 +86,8 @@ export default {
return { return {
searching: false, searching: false,
focused: false, focused: false,
filled: false, overlayVisible: false,
overlayVisible: false inputTextValue: null
}; };
}, },
watch: { watch: {
@ -154,6 +155,8 @@ export default {
selectItem(event, item) { selectItem(event, item) {
if (this.multiple) { if (this.multiple) {
this.$refs.input.value = ''; this.$refs.input.value = '';
this.inputTextValue = '';
if (!this.isSelected(item)) { if (!this.isSelected(item)) {
let newValue = this.value ? [...this.value, item] : [item]; let newValue = this.value ? [...this.value, item] : [item];
this.$emit('input', newValue); this.$emit('input', newValue);
@ -227,6 +230,8 @@ export default {
}); });
}, },
onInput(event) { onInput(event) {
this.inputTextValue = event.target.value;
if (this.timeout) { if (this.timeout) {
clearTimeout(this.timeout); clearTimeout(this.timeout);
} }
@ -390,7 +395,7 @@ export default {
return ['p-autocomplete p-component', { return ['p-autocomplete p-component', {
'p-autocomplete-dd': this.dropdown, 'p-autocomplete-dd': this.dropdown,
'p-autocomplete-multiple': this.multiple, 'p-autocomplete-multiple': this.multiple,
'p-inputwrapper-filled': this.value, 'p-inputwrapper-filled': ((this.value && this.value.length) || (this.inputTextValue && this.inputTextValue.length)),
'p-inputwrapper-focus': this.focused 'p-inputwrapper-focus': this.focused
}]; }];
}, },