FIX: select-kit perf and positioning improvements (#7093)

FIX: select-kit perf and positioning improvements (#7093)

diff --git a/app/assets/javascripts/select-kit/components/multi-select.js.es6 b/app/assets/javascripts/select-kit/components/multi-select.js.es6
index 880f05e..3898288 100644
--- a/app/assets/javascripts/select-kit/components/multi-select.js.es6
+++ b/app/assets/javascripts/select-kit/components/multi-select.js.es6
@@ -331,20 +331,31 @@ export default SelectKitComponent.extend({
 
   deselect(rowComputedContentItems) {
     this.willDeselect(rowComputedContentItems);
+
     rowComputedContentItems = makeArray(rowComputedContentItems);
     const generatedComputedContents = this._filterRemovableComputedContents(
       makeArray(rowComputedContentItems)
     );
-    this.set("highlighted", null);
-    this.set("highlightedSelection", []);
+    this.setProperties({ highlighted: null, highlightedSelection: [] });
     this.get("computedValues").removeObjects(
       rowComputedContentItems.map(r => r.value)
     );
-    this.get("computedContent").removeObjects(generatedComputedContents);
-    run.next(() => this.mutateAttributes());
-    run.schedule("afterRender", () => {
-      this.didDeselect(rowComputedContentItems);
-      this.autoHighlight();
+    this.get("computedContent").removeObjects([
+      ...rowComputedContentItems,
+      ...generatedComputedContents
+    ]);
+
+    run.next(() => {
+      this.mutateAttributes();
+
+      run.schedule("afterRender", () => {
+        this.didDeselect(rowComputedContentItems);
+        this.autoHighlight();
+
+        if (!this.isDestroying && !this.isDestroyed) {
+          this._positionWrapper();
+        }
+      });
     });
   },
 
diff --git a/app/assets/javascripts/select-kit/mixins/dom-helpers.js.es6 b/app/assets/javascripts/select-kit/mixins/dom-helpers.js.es6
index 7fb8666..e01cfbb 100644
--- a/app/assets/javascripts/select-kit/mixins/dom-helpers.js.es6
+++ b/app/assets/javascripts/select-kit/mixins/dom-helpers.js.es6
@@ -116,6 +116,7 @@ export default Ember.Mixin.create({
 
   expand() {
     if (this.get("isExpanded")) return;
+
     this.setProperties({
       isExpanded: true,
       renderedBodyOnce: true,
@@ -135,6 +136,8 @@ export default Ember.Mixin.create({
   },
 
   collapse() {
+    if (!this.get("isExpanded")) return;
+
     this.set("isExpanded", false);
 
     Ember.run.next(() => {

GitHub sha: 2e881adb

1 Like