Fixed #4253 - AutoComplete: loading state
parent
5d74eae8a8
commit
eca735c8c8
|
@ -77,6 +77,12 @@ const AutoCompleteProps = [
|
||||||
default: 'null',
|
default: 'null',
|
||||||
description: 'Default text to display when no option is selected.'
|
description: 'Default text to display when no option is selected.'
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
name: 'loading',
|
||||||
|
type: 'boolean',
|
||||||
|
default: 'false',
|
||||||
|
description: 'Whether the multiselect is in loading state.'
|
||||||
|
},
|
||||||
{
|
{
|
||||||
name: 'disabled',
|
name: 'disabled',
|
||||||
type: 'boolean',
|
type: 'boolean',
|
||||||
|
|
|
@ -305,6 +305,11 @@ export interface AutoCompleteProps {
|
||||||
* Default text to display when no option is selected.
|
* Default text to display when no option is selected.
|
||||||
*/
|
*/
|
||||||
placeholder?: string | undefined;
|
placeholder?: string | undefined;
|
||||||
|
/**
|
||||||
|
* Whether the multiselect is in loading state.
|
||||||
|
* @defaultValue false
|
||||||
|
*/
|
||||||
|
loading?: boolean | undefined;
|
||||||
/**
|
/**
|
||||||
* When present, it specifies that the component should be disabled.
|
* When present, it specifies that the component should be disabled.
|
||||||
* @defaultValue false
|
* @defaultValue false
|
||||||
|
|
|
@ -87,7 +87,7 @@
|
||||||
/>
|
/>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
<slot v-if="searching" :class="cx('loadingIcon')" name="loadingicon">
|
<slot v-if="searching || loading" :class="cx('loadingIcon')" name="loadingicon">
|
||||||
<i v-if="loadingIcon" :class="['pi-spin', cx('loadingIcon'), loadingIcon]" aria-hidden="true" v-bind="ptm('loadingIcon')" />
|
<i v-if="loadingIcon" :class="['pi-spin', cx('loadingIcon'), loadingIcon]" aria-hidden="true" v-bind="ptm('loadingIcon')" />
|
||||||
<SpinnerIcon v-else :class="[cx('loadingIcon'), loadingIcon]" spin aria-hidden="true" v-bind="ptm('loadingIcon')" />
|
<SpinnerIcon v-else :class="[cx('loadingIcon'), loadingIcon]" spin aria-hidden="true" v-bind="ptm('loadingIcon')" />
|
||||||
</slot>
|
</slot>
|
||||||
|
@ -477,7 +477,7 @@ export default {
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
onContainerClick(event) {
|
onContainerClick(event) {
|
||||||
if (this.disabled || this.searching || this.isInputClicked(event) || this.isDropdownClicked(event)) {
|
if (this.disabled || this.searching || this.loading || this.isInputClicked(event) || this.isDropdownClicked(event)) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -187,6 +187,10 @@ export default {
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
default: false
|
default: false
|
||||||
},
|
},
|
||||||
|
loading: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
disabled: {
|
disabled: {
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
default: false
|
default: false
|
||||||
|
|
Loading…
Reference in New Issue