From 3c19d952b1fce9697a3fd814beca769e091f2863 Mon Sep 17 00:00:00 2001
From: Princi Vershwal <vershwal.princi@gmail.com>
Date: Thu, 4 Jul 2024 17:37:33 +0530
Subject: [PATCH] Added fix for Infinite loop when changing value of new
 navigation item's field value
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

fixed: https://linear.app/tryghost/issue/ENG-1351/🐛-infinite-loop-when-changing-value-of-new-navigation-items-field
---
 .../admin-x-design-system/src/hooks/useSortableIndexedList.tsx | 3 ++-
 apps/admin-x-settings/src/hooks/site/useNavigationEditor.tsx   | 2 +-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/apps/admin-x-design-system/src/hooks/useSortableIndexedList.tsx b/apps/admin-x-design-system/src/hooks/useSortableIndexedList.tsx
index a547b7facc..e3929e733d 100644
--- a/apps/admin-x-design-system/src/hooks/useSortableIndexedList.tsx
+++ b/apps/admin-x-design-system/src/hooks/useSortableIndexedList.tsx
@@ -1,5 +1,6 @@
 import {arrayMove} from '@dnd-kit/sortable';
 import {useEffect, useState} from 'react';
+import _ from 'lodash';
 
 export type SortableIndexedList<Item> = {
     items: Array<{ item: Item; id: string }>;
@@ -32,7 +33,7 @@ const useSortableIndexedList = <Item extends unknown>({items, setItems, blank, c
             allItems.push(newItem);
         }
 
-        if (JSON.stringify(allItems) !== JSON.stringify(items)) {
+        if (!_.isEqual(JSON.parse(JSON.stringify(allItems)), JSON.parse(JSON.stringify(items)))) {
             setItems(allItems);
         }
     }, [editableItems, newItem, items, setItems, canAddNewItem]);
diff --git a/apps/admin-x-settings/src/hooks/site/useNavigationEditor.tsx b/apps/admin-x-settings/src/hooks/site/useNavigationEditor.tsx
index a5c8b7ce8b..28def71364 100644
--- a/apps/admin-x-settings/src/hooks/site/useNavigationEditor.tsx
+++ b/apps/admin-x-settings/src/hooks/site/useNavigationEditor.tsx
@@ -31,7 +31,7 @@ const useNavigationEditor = ({items, setItems}: {
     const list = useSortableIndexedList<Omit<EditableItem, 'id'>>({
         items: items.map(item => ({...item, errors: {}})),
         setItems: newItems => setItems(newItems.map(({url, label}) => ({url, label}))),
-        blank: {label: '', url: '/', errors: {}},
+        blank: {url: '/',label: '', errors: {}},
         canAddNewItem: hasNewItem
     });