From 5c05ec489e14dfb9030ff9d8445e79f770c14eec Mon Sep 17 00:00:00 2001
From: Ali <83188384+testA113@users.noreply.github.com>
Date: Mon, 13 Feb 2023 15:06:14 +1300
Subject: [PATCH] fix(nameField): imperatively call setDebouncedValue when the
 value is changed by setFieldValue [EE-5002] (#8468)

Co-authored-by: testa113 <testa113>
---
 app/react/hooks/useDebounce.ts                    | 15 +++++++++------
 .../EnvironmentsCreationView/shared/NameField.tsx |  6 +++++-
 2 files changed, 14 insertions(+), 7 deletions(-)

diff --git a/app/react/hooks/useDebounce.ts b/app/react/hooks/useDebounce.ts
index 350ccc839..24c9c5535 100644
--- a/app/react/hooks/useDebounce.ts
+++ b/app/react/hooks/useDebounce.ts
@@ -1,5 +1,5 @@
 import _ from 'lodash';
-import { useState, useRef } from 'react';
+import { useState, useRef, useCallback } from 'react';
 
 export function useDebounce(
   defaultValue: string,
@@ -9,10 +9,13 @@ export function useDebounce(
 
   const onChangeDebounces = useRef(_.debounce(onChange, 300));
 
-  return [searchValue, handleChange] as const;
+  const handleChange = useCallback(
+    (value: string) => {
+      setSearchValue(value);
+      onChangeDebounces.current(value);
+    },
+    [onChangeDebounces, setSearchValue]
+  );
 
-  function handleChange(value: string) {
-    setSearchValue(value);
-    onChangeDebounces.current(value);
-  }
+  return [searchValue, handleChange] as const;
 }
diff --git a/app/react/portainer/environments/wizard/EnvironmentsCreationView/shared/NameField.tsx b/app/react/portainer/environments/wizard/EnvironmentsCreationView/shared/NameField.tsx
index 23f171e98..36acc020b 100644
--- a/app/react/portainer/environments/wizard/EnvironmentsCreationView/shared/NameField.tsx
+++ b/app/react/portainer/environments/wizard/EnvironmentsCreationView/shared/NameField.tsx
@@ -1,6 +1,6 @@
 import { useField } from 'formik';
 import { string } from 'yup';
-import { useRef } from 'react';
+import { useRef, useEffect } from 'react';
 
 import { getEnvironments } from '@/react/portainer/environments/environment.service';
 import { useDebounce } from '@/react/hooks/useDebounce';
@@ -25,6 +25,10 @@ export function NameField({
 
   const [debouncedValue, setDebouncedValue] = useDebounce(value, setValue);
 
+  useEffect(() => {
+    setDebouncedValue(value);
+  }, [setDebouncedValue, value]);
+
   return (
     <FormControl
       label="Name"