From c5daecb36dc96238f64b19244dc79c028897edf4 Mon Sep 17 00:00:00 2001
From: ElenaPavluchuk <elena.pvlch@gmail.com>
Date: Fri, 19 Jun 2026 11:48:58 +0300
Subject: [PATCH] feat-169:limit number of chars in tag name

---
 .../ui/CreateApplicationMentorPage.tsx                       | 5 +++++
 src/pages/MentorUserProfilePage/ui/MentorUserProfilePage.tsx | 5 +++++
 2 files changed, 10 insertions(+)

diff --git a/src/pages/CreateApplicationMentorPage/ui/CreateApplicationMentorPage.tsx b/src/pages/CreateApplicationMentorPage/ui/CreateApplicationMentorPage.tsx
index 088e0ac..c261c4c 100644
--- a/src/pages/CreateApplicationMentorPage/ui/CreateApplicationMentorPage.tsx
+++ b/src/pages/CreateApplicationMentorPage/ui/CreateApplicationMentorPage.tsx
@@ -24,6 +24,7 @@ export const CreateApplicationMentorPage: React.FC = () => {
   const [successMessage, setSuccessMessage] = useState<string | null>(null);
 
   const MAX_TAGS = 10;
+  const MAX_TAG_LENGTH = 50;
 
   useEffect(() => {
     const fetchTags = async () => {
@@ -210,6 +211,10 @@ export const CreateApplicationMentorPage: React.FC = () => {
                   menuPortal: (base) => ({ ...base, zIndex: 11000 }),
                   menu: (base) => ({ ...base, zIndex: 11000 }),
                 }}
+                isValidNewOption={(inputValue) =>
+                  inputValue.trim().length > 0 &&
+                  inputValue.trim().length <= MAX_TAG_LENGTH
+                }
               />
               {errors.tags && <p className={style.error}>{errors.tags}</p>}
 
diff --git a/src/pages/MentorUserProfilePage/ui/MentorUserProfilePage.tsx b/src/pages/MentorUserProfilePage/ui/MentorUserProfilePage.tsx
index 03907a6..cb453fe 100644
--- a/src/pages/MentorUserProfilePage/ui/MentorUserProfilePage.tsx
+++ b/src/pages/MentorUserProfilePage/ui/MentorUserProfilePage.tsx
@@ -53,6 +53,7 @@ export default function MentorUserProfilePage() {
   const animatedComponents = makeAnimated();
 
   const MAX_TAGS = 10;
+  const MAX_TAG_LENGTH = 50;
 
   const normalizeTags = (tags: string[]) =>
     tags.map((tag) => ({
@@ -367,6 +368,10 @@ export default function MentorUserProfilePage() {
                 label: inputValue.toLowerCase().trim(),
                 value: inputValue.toLowerCase().trim(),
               })}
+              isValidNewOption={(inputValue) =>
+                inputValue.trim().length > 0 &&
+                inputValue.trim().length <= MAX_TAG_LENGTH
+              }
             />
             {selectTagError && <p className="text-red-500 italic">{selectTagError}</p>}