Fixed #4253 - AutoComplete: loading state

api-generator/components/autocomplete.js

@@ -77,6 +77,12 @@ const AutoCompleteProps = [
         default: 'null',
         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',
         type: 'boolean',

components/lib/autocomplete/AutoComplete.d.ts

@@ -305,6 +305,11 @@ export interface AutoCompleteProps {
      * Default text to display when no option is selected.
      */
     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.
      * @defaultValue false

components/lib/autocomplete/AutoComplete.vue

@@ -87,7 +87,7 @@
                 />
             </li>
         </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')" />
             <SpinnerIcon v-else :class="[cx('loadingIcon'), loadingIcon]" spin aria-hidden="true" v-bind="ptm('loadingIcon')" />
         </slot>
@@ -477,7 +477,7 @@ export default {
             }
         },
         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;
             }
 

components/lib/autocomplete/BaseAutoComplete.vue

@@ -187,6 +187,10 @@ export default {
             type: Boolean,
             default: false
         },
+        loading: {
+            type: Boolean,
+            default: false
+        },
         disabled: {
             type: Boolean,
             default: false