fix the icon form for Comment input

src/components/Forms/IconForm.tsx

@@ -32,7 +32,7 @@ const IconForm = ({
   onEndEditing,
 }: props) => {
   const [isFocused, setIsFocused] = useState(false);
-  const [showPass, setShowPass] = useState(true);
+  const [showPass, setShowPass] = useState(type === "password" ? true : false);
   const [isError, setIsError] = useState(false);
 
   let backgroundColor: string;
@@ -56,7 +56,7 @@ const IconForm = ({
 
   const endEdit = () => {
     setIsFocused(false);
-    if (type === "search" || disabled) {
+    if (type === "search" || disabled || type === "comment") {
       setIsError(false);
     } else {
       if (!validateEmpty(text)) {
@@ -123,29 +123,29 @@ const IconForm = ({
             autoCapitalize={type === "password" ? "none" : "sentences"}
           />
         </View>
-        <TouchableOpacity
-          onPress={() => type === "password" && setShowPass(!showPass)}
-          testID="Touchable"
-        >
-          {(type === "comment" || type === "search") && (
-            <TouchableOpacity testID="TouchableIcon" onPress={() => onPress()}>
-              <MaterialIcons
-                name={iconName}
-                size={21}
-                color={Colors.text.disabled}
-                testID="MaterialIcon"
-              />
-            </TouchableOpacity>
-          )}
-          {!(type === "comment" || type === "search") && (
+        {type === "password" && (
+          <TouchableOpacity
+            onPress={() => type === "password" && setShowPass(!showPass)}
+            testID="Touchable"
+          >
             <MaterialIcons
               name={iconName}
               size={21}
               color={Colors.text.disabled}
               testID="MaterialIcon"
             />
-          )}
-        </TouchableOpacity>
+          </TouchableOpacity>
+        )}
+        {(type === "comment" || type === "search") && (
+          <TouchableOpacity testID="TouchableIcon" onPress={() => onPress()}>
+            <MaterialIcons
+              name={iconName}
+              size={21}
+              color={Colors.text.disabled}
+              testID="MaterialIcon"
+            />
+          </TouchableOpacity>
+        )}
       </View>
       {isError && (
         <View testID="ErrorContainer">

src/components/__tests__/Forms/IconForm.test.tsx

@@ -36,18 +36,21 @@ describe("Icon Form Test", () => {
     const { getByTestId } = render(<IconFormWrapper />);
     expect(getByTestId("Input")).not.toBeNull();
   });
-  it("Should detect a touchable", () => {
-    const { getByTestId } = render(<IconFormWrapper />);
-    expect(getByTestId("Touchable")).not.toBeNull();
-  });
-  it("Should detect a MaterialIcon for password", () => {
+  it("Should detect a touchable for password", () => {
     const { getByTestId } = render(<IconFormWrapper type="password" />);
-    expect(getByTestId("MaterialIcon")).not.toBeNull();
+    expect(getByTestId("Touchable")).not.toBeNull();
   });
-  it("Should detect a MaterialIcon for search or comment", () => {
+  it("Should detect a touchable icon for comment", () => {
     const { getByTestId } = render(<IconFormWrapper type="comment" />);
     expect(getByTestId("MaterialIcon")).not.toBeNull();
   });
+  it("Should detect an onPress function", () => {
+    const { getByTestId } = render(
+      <IconFormWrapper type="comment" onPress={() => {}} />
+    );
+    fireEvent(getByTestId("TouchableIcon"), "onPress");
+    expect(getByTestId("TouchableIcon")).not.toBeNull();
+  });
   it("Should not detect a container title", () => {
     const { queryByTestId } = render(<IconFormWrapper />);
     expect(queryByTestId("TitleContainer")).toBeNull();