MOSIP-36490 : Enhanced the clearing text cross-icon in Input tap ofil…

…ter part. (#866)

Signed-off-by: Anil_Kumar_Majji <[email protected]>

pmp-reactjs-ui/src/pages/common/fields/TextInputComponent.js

@@ -1,9 +1,13 @@
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
+import { isLangRTL } from '../../../utils/AppUtils';
+import { getUserProfile } from '../../../services/UserProfileService';
 
 function TextInputComponent({ fieldName, fieldNameKey, placeHolderKey, onTextChange, styleSet, id }) {
     const { t } = useTranslation();
     const [inputValue, setInputValue] = useState('');
+    const isLoginLanguageRTL = isLangRTL(getUserProfile().langCode);
+
 
     const handleInputChange = (event) => {
         const newValue = event.target.value;
@@ -16,16 +20,14 @@ function TextInputComponent({ fieldName, fieldNameKey, placeHolderKey, onTextCha
             <label className={`flex items-center text-dark-blue text-sm mb-2 ${(styleSet && styleSet.inputLabel) ? styleSet.inputLabel : ''}`}>
                 <p className={`font-semibold`}>{t(fieldNameKey)}</p>
             </label>
-
-            <input
-                id={id}
-                type="text"
-                value={inputValue}
-                onChange={handleInputChange}
-                placeholder={t(placeHolderKey)}
-                className={`w-full px-2 py-2 h-[2.3rem] border border-[#707070] rounded-[4px] text-[15px] 
-                    ${styleSet && styleSet.inputField ? styleSet.inputField : ''} focus:outline-none `}
-            />
+            <div className={`flex border border-[#707070] rounded-[4px] text-[15px] items-center`}>
+                <input id={id} type="text" value={inputValue} onChange={handleInputChange} placeholder={t(placeHolderKey)} className={`rounded-md h-[2.1rem] ${isLoginLanguageRTL ? 'pr-3' : 'pl-3'} focus:outline-none items-center ${styleSet && styleSet.inputField ? styleSet.inputField : ''}`} />
+                {inputValue &&
+                    (<p onClick={() => setInputValue('')} className={`bg-white font-bold rounded-md px-2 ${isLoginLanguageRTL ? '-mr-6' : '-ml-6'} focus:outline-none items-center hover:cursor-pointer`}>
+                        x
+                    </p>
+                    )}
+            </div>
         </div>
     );
 }