CDxSelectAutocomplete component will cancel the request and correct p…

…roperly onBlur
instedd · Jul 27, 2023 · 5da106f · 5da106f
1 parent 50cdc80
commit 5da106f
Showing 1 changed file with 20 additions and 2 deletions.
diff --git a/app/assets/javascripts/components/cdx_select_autocomplete.js.jsx b/app/assets/javascripts/components/cdx_select_autocomplete.js.jsx
@@ -38,6 +38,7 @@ var CdxSelectAutocomplete = React.createClass({
       value={this.props.value || ""}
       onChange={this.onChange}
       onInputChange={this.props.combobox && this.copyValue}
+      onBlur= {this.onBlur}
     />);
   },
 
@@ -50,11 +51,17 @@ var CdxSelectAutocomplete = React.createClass({
     var url = this.props.url;
     url += (url.includes("?") ? "&query=" : "?query=") + encodeURIComponent(query);
 
-    $.ajax({
+    this.cancelAjax();
+
+    this.xhr = $.ajax({
       type: this.props.method || "GET",
       url: url,
 
       success: function (options) {
+        if (!this.selectRef.state.isFocused) {
+          this.selectRef.setState({ isLoading: false });
+          return;
+        }
         if (prepareOptions) {
           options = prepareOptions.call(null, options);
         }
@@ -68,11 +75,18 @@ var CdxSelectAutocomplete = React.createClass({
       }.bind(this),
 
       error: function (_, error) {
-        callback(error);
+        if (error !== "abort") {
+          callback(error);
+        }
       },
     })
   },
 
+  onBlur: function () {
+    this.selectRef.setState({ isLoading: false });
+    this.cancelAjax()
+  },
+
   onChange: function (value, options) {
     if (this.props.onSelect) {
       this.props.onSelect.call(null, value, options);
@@ -81,5 +95,9 @@ var CdxSelectAutocomplete = React.createClass({
 
   setSelectRef: function (ref) {
     this.selectRef = ref;
+  },
+
+  cancelAjax: function () {
+    if (this.xhr) this.xhr.abort();
   }
 });