diff --git a/.changeset/twelve-mails-shave.md b/.changeset/twelve-mails-shave.md new file mode 100644 index 00000000000..c153c924310 --- /dev/null +++ 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 index 941be675893..f5ef48eeb67 100644 --- a/src/navigation/components/MenuItemDialog/MenuItemDialog.tsx +++ b/src/navigation/components/MenuItemDialog/MenuItemDialog.tsx @@ -77,11 +77,17 @@ const MenuItemDialog: React.FC = ({ 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 = ({ 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 = ({ name="linkValue" error={!!error} helperText={error?.message} - fetchOptions={() => undefined} + fetchOptions={onQueryChange} loading={loading} - onInputValueChange={onQueryChange} data-test-id="menu-item-link-value-input" /> );