Reduce work done for unhighlightAll during on-click handler (batch handler in v11.0.0-rc8 would also have helped) Choices-js#522 Choices-js#599

Author: Xon

CHANGELOG.md

@@ -1,5 +1,10 @@
 # Changelog
 
+## [11.0.0]
+
+### Bug Fixes (from 10.2.0)
+* Reduce work done for `unhighlightAll` during on-click handler (batching in v11.0.0-rc8 would also have helped) [#522](https://github.com/Choices-js/Choices/issues/522) [#599](https://github.com/Choices-js/Choices/issues/599)
+
 ## [11.0.0-rc8] (2024-08-23)
 
 ### ⚠ BREAKING CHANGES

src/scripts/choices.ts

@@ -408,7 +408,7 @@ class Choices {
     if (!item || !item.id) {
       return this;
     }
-    const choice = this._store.choices.find((c) => c.id === item.id);
+    const choice = this._store.items.find((c) => c.id === item.id);
     if (!choice || choice.highlighted) {
       return this;
     }
@@ -426,7 +426,7 @@ class Choices {
     if (!item || !item.id) {
       return this;
     }
-    const choice = this._store.choices.find((c) => c.id === item.id);
+    const choice = this._store.items.find((c) => c.id === item.id);
     if (!choice || !choice.highlighted) {
       return this;
     }
@@ -442,15 +442,23 @@ class Choices {
 
   highlightAll(): this {
     this._store.withTxn(() => {
-      this._store.items.forEach((item) => this.highlightItem(item));
+      this._store.items.forEach((item) => {
+        if (!item.highlighted) {
+          this.highlightItem(item);
+        }
+      });
     });
 
     return this;
   }
 
   unhighlightAll(): this {
     this._store.withTxn(() => {
-      this._store.items.forEach((item) => this.unhighlightItem(item));
+      this._store.items.forEach((item) => {
+        if (item.highlighted) {
+          this.unhighlightItem(item);
+        }
+      });
     });
 
     return this;
@@ -1957,14 +1965,9 @@ class Choices {
         this.hideDropdown();
       }
     } else {
-      const hasHighlightedItems = !!this._store.highlightedActiveItems.length;
-
-      if (hasHighlightedItems) {
-        this.unhighlightAll();
-      }
-
       containerOuter.removeFocusState();
       this.hideDropdown(true);
+      this.unhighlightAll();
     }
   }
 
@@ -2007,17 +2010,13 @@ class Choices {
     const blurWasWithinContainer = target && containerOuter.element.contains(target as Node);
 
     if (blurWasWithinContainer && !this._isScrollingOnIe) {
-      const { activeChoices } = this._store;
-      const hasHighlightedItems = activeChoices.some((item) => item.highlighted);
       const targetIsInput = target === this.input.element;
       const blurActions = {
         [TEXT_TYPE]: (): void => {
           if (targetIsInput) {
             containerOuter.removeFocusState();
-            if (hasHighlightedItems) {
-              this.unhighlightAll();
-            }
             this.hideDropdown(true);
+            this.unhighlightAll();
           }
         },
         [SELECT_ONE_TYPE]: (): void => {
@@ -2030,9 +2029,7 @@ class Choices {
           if (targetIsInput) {
             containerOuter.removeFocusState();
             this.hideDropdown(true);
-            if (hasHighlightedItems) {
-              this.unhighlightAll();
-            }
+            this.unhighlightAll();
           }
         },
       };