From 13d9b12a2e844f94442d9cfeaeed01a3d1b29f9c Mon Sep 17 00:00:00 2001
From: Oscar Zhou <100548325+oscarzhou-portainer@users.noreply.github.com>
Date: Mon, 12 Aug 2024 17:09:49 +1200
Subject: [PATCH] fix(group): create group twice when associating devices
 [EE-7418] (#12092)

---
 .../Selectors/GroupSelector.tsx               | 58 -------------------
 1 file changed, 58 deletions(-)

diff --git a/app/react/edge/edge-devices/WaitingRoomView/Datatable/AssignmentDialog/Selectors/GroupSelector.tsx b/app/react/edge/edge-devices/WaitingRoomView/Datatable/AssignmentDialog/Selectors/GroupSelector.tsx
index 7630c0991..3d561dd74 100644
--- a/app/react/edge/edge-devices/WaitingRoomView/Datatable/AssignmentDialog/Selectors/GroupSelector.tsx
+++ b/app/react/edge/edge-devices/WaitingRoomView/Datatable/AssignmentDialog/Selectors/GroupSelector.tsx
@@ -1,4 +1,3 @@
-import { useCallback, useState } from 'react';
 import { useField } from 'formik';
 
 import { useGroups } from '@/react/portainer/environments/environment-groups/queries';
@@ -7,7 +6,6 @@ import { useCreateGroupMutation } from '@/react/portainer/environments/environme
 import { notifySuccess } from '@/portainer/services/notifications';
 
 import { Select } from '@@/form-components/ReactSelect';
-import { Option } from '@@/form-components/PortainerSelect';
 
 import { FormValues } from '../types';
 
@@ -23,12 +21,6 @@ export function GroupSelector() {
         .map((opt) => ({ label: opt.Name, value: opt.Id })),
   });
 
-  const { onInputChange, clearInputValue } = useCreateOnBlur({
-    options: groupsQuery.data || [],
-    setValue,
-    createValue: handleCreate,
-  });
-
   if (!groupsQuery.data) {
     return null;
   }
@@ -47,7 +39,6 @@ export function GroupSelector() {
       }
       onCreateOption={handleCreate}
       onChange={handleChange}
-      onInputChange={onInputChange}
       onBlur={onBlur}
       isLoading={createMutation.isLoading}
       isDisabled={createMutation.isLoading}
@@ -71,54 +62,5 @@ export function GroupSelector() {
 
   function handleChange(value: { value: EnvironmentGroupId } | null) {
     setValue(value ? value.value : 1);
-    clearInputValue();
   }
 }
-
-function useCreateOnBlur({
-  options,
-  setValue,
-  createValue,
-}: {
-  options: Option<number>[];
-  setValue: (value: number) => void;
-  createValue: (value: string) => void;
-}) {
-  const [inputValue, setInputValue] = useState('');
-
-  const handleBlur = useCallback(() => {
-    const label = inputValue?.trim() || '';
-    if (!label) {
-      return;
-    }
-
-    const option = options.find((opt) => opt.label === label);
-    if (option) {
-      setValue(option.value);
-    } else {
-      createValue(label);
-    }
-    setInputValue('');
-  }, [createValue, inputValue, options, setValue]);
-
-  const handleInputChange = useCallback(
-    (inputValue, { action }) => {
-      if (action === 'input-change') {
-        setInputValue(inputValue);
-      }
-      if (action === 'input-blur') {
-        handleBlur();
-      }
-    },
-    [handleBlur]
-  );
-
-  const clearInputValue = useCallback(() => {
-    setInputValue('');
-  }, []);
-
-  return {
-    onInputChange: handleInputChange,
-    clearInputValue,
-  };
-}