fix link value selection

saleor · Nov 6, 2024 · 6b51519 · 6b51519
1 parent 5b6ed8c
commit 6b51519
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 4 deletions.
diff --git a/.changeset/twelve-mails-shave.md b/.changeset/twelve-mails-shave.md
@@ -0,0 +1,5 @@
+---
+"saleor-dashboard": patch
+---
+
+Link value input in Navigation no longer overrides input value with cached value.
diff --git a/src/navigation/components/MenuItemDialog/MenuItemDialog.tsx b/src/navigation/components/MenuItemDialog/MenuItemDialog.tsx
@@ -77,11 +77,17 @@ const MenuItemDialog: React.FC<MenuItemDialogProps> = ({
     onClose: () => {
       reset(defaultInitial);
       clearErrors();
+      onQueryChange("");
     },
   });
 
   // Refresh initial display value if changed
-  React.useEffect(() => reset(initial), [initial]);
+  React.useEffect(() => {
+    // Form should be reset only when dialog is opened
+    // otherwise it will reset form on every render and when input is empty
+    reset(initial);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [open]);
 
   const errors = useModalDialogErrors(apiErrors, open);
   const mutationErrors = errors.filter(err => err.field === null);
@@ -187,7 +193,7 @@ const MenuItemDialog: React.FC<MenuItemDialogProps> = ({
                           onChange={onChange}
                           value={
                             // Show initial value with label in case initial options list from API does not contain it
-                            initial && !formState.isDirty
+                            initial && !formState.dirtyFields.linkValue
                               ? {
                                   value,
                                   label: initialDisplayValue,
@@ -197,9 +203,8 @@ const MenuItemDialog: React.FC<MenuItemDialogProps> = ({
                           name="linkValue"
                           error={!!error}
                           helperText={error?.message}
-                          fetchOptions={() => undefined}
+                          fetchOptions={onQueryChange}
                           loading={loading}
-                          onInputValueChange={onQueryChange}
                           data-test-id="menu-item-link-value-input"
                         />
                       );