From 915b91297cd98df0085516e5e22f0908efcb5d5e Mon Sep 17 00:00:00 2001
From: Kartik Gupta <gupta.kartik18kg@gmail.com>
Date: Wed, 31 Jul 2024 15:15:39 +0530
Subject: [PATCH] add live validation for page handler (#10491)

---
 .../Editor/LeftSidebar/SidebarPageSelector/EditInput.jsx    | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/frontend/src/Editor/LeftSidebar/SidebarPageSelector/EditInput.jsx b/frontend/src/Editor/LeftSidebar/SidebarPageSelector/EditInput.jsx
index f7c5f79df2..2c0156c337 100644
--- a/frontend/src/Editor/LeftSidebar/SidebarPageSelector/EditInput.jsx
+++ b/frontend/src/Editor/LeftSidebar/SidebarPageSelector/EditInput.jsx
@@ -1,5 +1,6 @@
 import React, { useState } from 'react';
 import { ToolTip } from '@/Editor/Inspector/Elements/Components/ToolTip';
+import { validateKebabCase } from '@/_helpers/utils';
 
 export const EditInput = ({ slug, error, setError, pageHandle, setPageHandle, isSaving = false }) => {
   const [value, set] = useState(pageHandle);
@@ -10,7 +11,10 @@ export const EditInput = ({ slug, error, setError, pageHandle, setPageHandle, is
 
     if (newHandle === '') setError('Page handle cannot be empty');
     if (newHandle === value) setError('Page handle cannot be same as the existing page handle');
-
+    const isValidKebabCase = validateKebabCase(newHandle);
+    if (!isValidKebabCase.isValid) {
+      setError(isValidKebabCase.error);
+    }
     set(newHandle);
   };