Fix: validate member names must be selected from dropdown on submit

Author: sayali-2308

src/components/FeedbackModal/FeedbackModal.jsx

@@ -1,6 +1,7 @@
 import axios from 'axios';
 import { useEffect, useRef, useState } from 'react';
 import { useSelector } from 'react-redux';
+import { toast } from 'react-toastify';
 import {
   Button,
   FormGroup,
@@ -38,13 +39,13 @@ function FeedbackModal() {
     const checkHelpRequest = async () => {
       try {
         const response = await axios.get(ENDPOINTS.QUESTIONNAIRE_CHECK_MODAL(userProfile._id));
-        console.log('CHECK MODAL RESPONSE:', response.data); // ← add this
         if (response.data.showModal) {
           setIsOpen(true);
         } else {
           setIsOpen(false);
         }
       } catch (error) {
+        // eslint-disable-next-line no-console
         console.error('Error checking help request:', error);
         setIsOpen(false);
       }
@@ -81,6 +82,34 @@ function FeedbackModal() {
       return;
     }
 
+    // Validate that all filled member names are valid users from the list
+    const allUsers = [...activeUsers, ...inactiveUsers];
+
+    const invalidActive = ratedMembers.find(
+      m =>
+        m.name.trim() !== '' &&
+        !allUsers.some(
+          u => `${u.firstName} ${u.lastName}`.toLowerCase() === m.name.trim().toLowerCase(),
+        ),
+    );
+
+    const invalidInactive = inactiveRatedMembers.find(
+      m =>
+        m.name.trim() !== '' &&
+        !allUsers.some(
+          u => `${u.firstName} ${u.lastName}`.toLowerCase() === m.name.trim().toLowerCase(),
+        ),
+    );
+
+    if (invalidActive || invalidInactive) {
+      toast.warn('Please select valid members from the dropdown only.');
+      return;
+    }
+    console.log('allUsers:', allUsers);
+    console.log('ratedMembers:', ratedMembers);
+    console.log('invalidActive:', invalidActive);
+    console.log('invalidInactive:', invalidInactive);
+
     setIsSubmitting(true);
 
     try {

src/components/FeedbackModal/MemberSearchBar.jsx

@@ -1,5 +1,5 @@
-import { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
+import { useEffect, useState } from 'react';
 import { Input, ListGroup, ListGroupItem } from 'reactstrap';
 import styles from './MemberSearchBar.module.css';
 
@@ -10,11 +10,9 @@ function MemberSearchBar({ id, value, onChange, inactive, usersList = [] }) {
   const [loading, setLoading] = useState(false);
 
   useEffect(() => {
-    // Set the value of the input when the value prop changes
     setSearchTerm(value);
   }, [value]);
 
-  // Filter users based on search term
   const filterUsers = searchText => {
     if (!searchText.trim() || !usersList || usersList.length === 0) {
       setSuggestions([]);
@@ -25,18 +23,13 @@ function MemberSearchBar({ id, value, onChange, inactive, usersList = [] }) {
 
     try {
       const lowerSearchText = searchText.toLowerCase();
-
-      // Filter users based on first name or last name containing the search text
       const filteredUsers = usersList.filter(user =>
         `${user.firstName} ${user.lastName}`.toLowerCase().includes(lowerSearchText),
       );
-
-      // Format users for display
       const formattedUsers = filteredUsers.map(user => ({
         ...user,
         fullName: `${user.firstName} ${user.lastName}`,
       }));
-
       setSuggestions(formattedUsers);
     } catch (error) {
       // eslint-disable-next-line no-console
@@ -52,7 +45,6 @@ function MemberSearchBar({ id, value, onChange, inactive, usersList = [] }) {
     setSearchTerm(inputValue);
     onChange(inputValue);
 
-    // Debounce the filtering
     const timeoutId = setTimeout(() => {
       filterUsers(inputValue);
       setShowSuggestions(true);
@@ -68,6 +60,25 @@ function MemberSearchBar({ id, value, onChange, inactive, usersList = [] }) {
     setShowSuggestions(false);
   };
 
+  // Validate on blur — clear if typed text doesn't match any user in the list
+  const handleBlur = () => {
+    setTimeout(() => {
+      setShowSuggestions(false);
+
+      if (searchTerm.trim() !== '') {
+        const isValidUser = usersList.some(
+          user =>
+            `${user.firstName} ${user.lastName}`.toLowerCase() === searchTerm.trim().toLowerCase(),
+        );
+
+        if (!isValidUser) {
+          setSearchTerm('');
+          onChange('');
+        }
+      }
+    }, 200);
+  };
+
   return (
     <div className={`${styles.memberSearchContainer}`}>
       <Input

src/components/HGNHelpSkillsDashboard/FeedbackModal.jsx

@@ -84,6 +84,16 @@ function FeedbackModal({ authUser }) {
       return;
     }
 
+    // Validate that member names are selected from dropdown only
+    const invalidActive = activeMembers.find(m => m.name.trim() !== '' && !m.selectedUser);
+
+    const invalidInactive = inactiveMembers.find(m => m.name.trim() !== '' && !m.selectedUser);
+
+    if (invalidActive || invalidInactive) {
+      toast.warn('Please select valid members from the dropdown only.');
+      return;
+    }
+
     const userId = authUser?.userid || 'test-user-id';
 
     const feedbackData = {