From be3b8bbd1c8a302dfb48cd3ef48d5de427e61f6b Mon Sep 17 00:00:00 2001
From: Magnus Heskestad Waage <57612883+mhwaage@users.noreply.github.com>
Date: Tue, 7 May 2024 14:56:28 +0200
Subject: [PATCH] Bugfix/select all crashes (#3428)

* Move toggleAllSelected so it is clear which variables it is using

* Remove deeply suspicious useEffect

This resolves a crash that occurs when clicking select all 'too' quickly
which otherwise can trigger an infinite loop inside this useEffect.
---
 .../components/Autocomplete/Autocomplete.tsx  | 22 +++++++------------
 1 file changed, 8 insertions(+), 14 deletions(-)

diff --git a/packages/eds-core-react/src/components/Autocomplete/Autocomplete.tsx b/packages/eds-core-react/src/components/Autocomplete/Autocomplete.tsx
index 801345befb..f04529bc59 100644
--- a/packages/eds-core-react/src/components/Autocomplete/Autocomplete.tsx
+++ b/packages/eds-core-react/src/components/Autocomplete/Autocomplete.tsx
@@ -367,14 +367,6 @@ function AutocompleteInner<T>(
     return _availableItems
   }, [_availableItems, showSelectAll])
 
-  const toggleAllSelected = () => {
-    if (selectedItems.length === inputOptions.length) {
-      setSelectedItems([])
-    } else {
-      setSelectedItems(inputOptions)
-    }
-  }
-
   useEffect(() => {
     const availableHash = JSON.stringify(inputOptions)
     const optionsHash = JSON.stringify(options)
@@ -446,6 +438,14 @@ function AutocompleteInner<T>(
     return 'NONE'
   }, [inputOptions, selectedItems])
 
+  const toggleAllSelected = () => {
+    if (selectedItems.length === inputOptions.length) {
+      setSelectedItems([])
+    } else {
+      setSelectedItems(inputOptions)
+    }
+  }
+
   const getLabel = useCallback(
     (item: T) => {
       //note: non strict check for null or undefined to allow 0
@@ -726,12 +726,6 @@ function AutocompleteInner<T>(
     reset: resetCombobox,
   } = useCombobox(comboBoxProps)
 
-  useEffect(() => {
-    if (isControlled) {
-      setSelectedItems(selectedOptions)
-    }
-  }, [isControlled, selectedOptions, setSelectedItems])
-
   const { x, y, refs, update, strategy } = useFloating<HTMLInputElement>({
     placement: 'bottom-start',
     middleware: [