[5.13.7] Added check for promise for handleChange to set suffixIcon internally

Author: isnifer

CHANGELOG.md

@@ -1,3 +1,9 @@
+## 5.13.7
+
+### Updated
+
+- Added check for promise for `handleChange` to set `suffixIcon` internally
+
 ## 5.13.6
 
 ### Updated

README.md

@@ -82,6 +82,7 @@ See demo at [https://detools-vue-form.netlify.com](https://detools-vue-form.netl
 
 ## Changelog
 
+- [5.13.7](/CHANGELOG.md#5137)
 - [5.13.6](/CHANGELOG.md#5136)
 - [5.13.5](/CHANGELOG.md#5135)
 - [5.13.4](/CHANGELOG.md#5134)

VueForm/components/ConnectedSelect.js

@@ -95,6 +95,12 @@ const ConnectedSelect = {
 
   mixins: [ConnectedSelectMixin],
 
+  data() {
+    return {
+      loadingState: false,
+    }
+  },
+
   methods: {
     generateOption(option) {
       const { valueKey, labelKey } = this
@@ -140,7 +146,19 @@ const ConnectedSelect = {
 
     handleFieldChange(...args) {
       this.setDirty()
-      this.handleChange(...args)
+
+      const posiblePromise = this.handleChange(...args)
+      if (posiblePromise && posiblePromise.then) {
+        this.loadingState = true
+
+        posiblePromise
+          .then(() => {
+            this.loadingState = false
+          })
+          .catch(() => {
+            this.loadingState = false
+          })
+      }
 
       return this.setAsyncError(this.asyncValidators)()
     },
@@ -171,7 +189,7 @@ const ConnectedSelect = {
           no-match-text={this.noMatchText}
           no-data-text={this.noDataText}
           reserve-keyword={this.reserveKeyword}
-          suffixIcon={this.suffixIcon}
+          suffixIcon={this.suffixIcon || (this.loadingState ? 'el-icon-loading' : '')}
           default-first-option={defaultFirstOption}
           popper-append-to-body={this.popperAppendToBody}
           automatic-dropdown={this.automaticDropdown}

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@detools/vue-form",
-  "version": "5.13.6",
+  "version": "5.13.7",
   "description": "Form State Management for VueJS",
   "main": "VueForm/index.js",
   "scripts": {