From 7f158c0e1842cccac4928ef8b8181072ff00cd1a Mon Sep 17 00:00:00 2001
From: Princi Vershwal <vershwal.princi@gmail.com>
Date: Tue, 12 Nov 2024 10:40:15 +0530
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20Fixed=20Admin=20navigation=20set?=
 =?UTF-8?q?tings,=20pressing=20ENTER=20will=20now=20create=20a=20new=20nav?=
 =?UTF-8?q?igation=20item=20(#21591)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Ref
https://linear.app/ghost/issue/DES-73/enter-should-create-new-navigation-itemmove-to-next-field
---
 .../site/navigation/NavigationEditForm.tsx    |  1 +
 .../site/navigation/NavigationItemEditor.tsx  | 28 ++++++++++++++++---
 2 files changed, 25 insertions(+), 4 deletions(-)

diff --git a/apps/admin-x-settings/src/components/settings/site/navigation/NavigationEditForm.tsx b/apps/admin-x-settings/src/components/settings/site/navigation/NavigationEditForm.tsx
index 04692647c8..72cbbb1f46 100644
--- a/apps/admin-x-settings/src/components/settings/site/navigation/NavigationEditForm.tsx
+++ b/apps/admin-x-settings/src/components/settings/site/navigation/NavigationEditForm.tsx
@@ -26,6 +26,7 @@ const NavigationEditForm: React.FC<{
             <Icon colorClass='text-grey-300 dark:text-grey-900 mt-1' name='add' size='sm' />
             <NavigationItemEditor
                 action={<Button className='mx-2 mt-1 self-center rounded bg-green p-1' data-testid="add-button" icon="add" iconColorClass='text-white' size='sm' unstyled onClick={navigation.addItem} />}
+                addItem={navigation.addItem}
                 baseUrl={baseUrl}
                 className="mt-1"
                 clearError={key => navigation.clearError(navigation.newItem.id, key)}
diff --git a/apps/admin-x-settings/src/components/settings/site/navigation/NavigationItemEditor.tsx b/apps/admin-x-settings/src/components/settings/site/navigation/NavigationItemEditor.tsx
index ef576008cc..50e2689ed8 100644
--- a/apps/admin-x-settings/src/components/settings/site/navigation/NavigationItemEditor.tsx
+++ b/apps/admin-x-settings/src/components/settings/site/navigation/NavigationItemEditor.tsx
@@ -1,7 +1,7 @@
 import React, {ReactNode} from 'react';
 import clsx from 'clsx';
 import {EditableItem, NavigationItem, NavigationItemErrors} from '../../../../hooks/site/useNavigationEditor';
-import {TextField, URLTextField} from '@tryghost/admin-x-design-system';
+import {TextField, URLTextField, formatUrl} from '@tryghost/admin-x-design-system';
 
 export type NavigationItemEditorProps = React.HTMLAttributes<HTMLDivElement> & {
     baseUrl: string;
@@ -12,9 +12,10 @@ export type NavigationItemEditorProps = React.HTMLAttributes<HTMLDivElement> & {
     unstyled?: boolean
     textFieldClasses?: string
     action?: ReactNode
+    addItem?: () => void
 }
 
-const NavigationItemEditor: React.FC<NavigationItemEditorProps> = ({baseUrl, item, updateItem, clearError, labelPlaceholder, unstyled, textFieldClasses, action, className, ...props}) => {
+const NavigationItemEditor: React.FC<NavigationItemEditorProps> = ({baseUrl, item, updateItem, addItem, clearError, labelPlaceholder, unstyled, textFieldClasses, action, className, ...props}) => {
     return (
         <div className={clsx('flex w-full items-start gap-3', className)} data-testid='navigation-item-editor' {...props}>
             <div className="flex flex-1 pt-1">
@@ -29,7 +30,14 @@ const NavigationItemEditor: React.FC<NavigationItemEditorProps> = ({baseUrl, ite
                     value={item.label}
                     hideTitle
                     onChange={e => updateItem?.({label: e.target.value})}
-                    onKeyDown={() => clearError?.('label')}
+                    onKeyDown={(e) => {
+                        updateItem?.({label: (e.target as HTMLInputElement).value});
+                        if (e.key === 'Enter') {
+                            e.preventDefault();
+                            addItem?.();
+                        }
+                        !!item.errors.label && clearError?.('label');
+                    }}
                 />
             </div>
             <div className="flex flex-1 pt-1">
@@ -44,7 +52,19 @@ const NavigationItemEditor: React.FC<NavigationItemEditorProps> = ({baseUrl, ite
                     value={item.url}
                     hideTitle
                     onChange={value => updateItem?.({url: value || ''})}
-                    onKeyDown={() => clearError?.('url')}
+                    onKeyDown={(e) => {
+                        const urls = formatUrl((e.target as HTMLInputElement).value, baseUrl, true);
+                        updateItem?.({url: urls.save || ''});  
+                    }}
+                    onKeyUp={(e) => {
+                        if (e.key === 'Enter') {
+                            e.preventDefault();
+                            const urls = formatUrl((e.target as HTMLInputElement).value, baseUrl, true);
+                            updateItem?.({url: urls.save || ''});
+                            addItem?.();
+                        }
+                        !!item.errors.url && clearError?.('url');
+                    }}
                 />
             </div>
             {action}