Fix name not updating when editing list

1 files changed, 20 insertions, 4 deletions

diff --git a/gui/src/renderer/components/EditApiAccessMethod.tsx b/gui/src/renderer/components/EditApiAccessMethod.tsx
index f60646ab36..c56329214b 100644
--- a/gui/src/renderer/components/EditApiAccessMethod.tsx
+++ b/gui/src/renderer/components/EditApiAccessMethod.tsx
@@ -280,15 +280,31 @@ function AccessMethodFormImpl(props: EditApiAccessMethodImplProps) {
 
   // State for the name input.
   const name = useRef(props.method?.name ?? '');
-  const updateName = useCallback((value: string) => (name.current = value), []);
+  const method = useRef<AccessMethod | undefined>(props.method);
 
   // When the form makes up a valid method the parent is updated.
-  const updateMethod = useCallback((value: AccessMethod) => {
-    if (name.current !== '') {
-      props.updateMethod({ ...value, name: name.current, enabled: true });
+  const onUpdate = useCallback(() => {
+    if (method.current !== undefined && name.current !== '') {
+      props.updateMethod({ ...method.current, name: name.current, enabled: true });
     }
   }, []);
 
+  const updateName = useCallback(
+    (value: string) => {
+      name.current = value;
+      onUpdate();
+    },
+    [onUpdate],
+  );
+
+  const updateMethod = useCallback(
+    (value: AccessMethod) => {
+      method.current = value;
+      onUpdate();
+    },
+    [onUpdate],
+  );
+
   return (
     <>
       <SettingsRow label={messages.gettext('Name')}>