Merge branch 'fix-api-access-method-gui-bugs-des-598'

1 files changed, 22 insertions, 6 deletions

diff --git a/gui/src/renderer/components/EditApiAccessMethod.tsx b/gui/src/renderer/components/EditApiAccessMethod.tsx
index 578c8fe31a..c56329214b 100644
--- a/gui/src/renderer/components/EditApiAccessMethod.tsx
+++ b/gui/src/renderer/components/EditApiAccessMethod.tsx
@@ -88,8 +88,8 @@ function AccessMethodForm() {
     }
   }, [updatedMethod, save, history.pop]);
 
-  const title = getTitle(id !== undefined);
-  const subtitle = getSubtitle(id !== undefined);
+  const title = getTitle(id === undefined);
+  const subtitle = getSubtitle(id === undefined);
 
   return (
     <BackAction action={history.pop}>
@@ -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')}>