chore: added outside click detector for custom attribute forms

web/components/custom-attributes/attribute-display/email.tsx

@@ -1,7 +1,8 @@
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
-
-// react-hook-form
 import { Controller, useForm } from "react-hook-form";
+
+// hooks
+import useOutsideClickDetector from "hooks/use-outside-click-detector";
 // types
 import { ICustomAttribute } from "types";
 
@@ -14,6 +15,8 @@ type Props = {
 export const CustomEmailAttribute: React.FC<Props> = ({ attributeDetails, onChange, value }) => {
   const [isEditing, setIsEditing] = useState(false);
 
+  const formRef = useRef(null);
+
   const { control, handleSubmit, reset, setFocus } = useForm({ defaultValues: { email: "" } });
 
   const handleFormSubmit = (data: { email: string }) => {
@@ -42,6 +45,10 @@ export const CustomEmailAttribute: React.FC<Props> = ({ attributeDetails, onChan
     };
   }, []);
 
+  useOutsideClickDetector(formRef, () => {
+    setIsEditing(false);
+  });
+
   return (
     <div className="flex-shrink-0">
       {!isEditing && (
@@ -59,7 +66,7 @@ export const CustomEmailAttribute: React.FC<Props> = ({ attributeDetails, onChan
         </div>
       )}
       {isEditing && (
-        <form onSubmit={handleSubmit(handleFormSubmit)} className="flex items-center">
+        <form onSubmit={handleSubmit(handleFormSubmit)} className="flex items-center" ref={formRef}>
           <Controller
             control={control}
             name="email"
@@ -68,6 +75,7 @@ export const CustomEmailAttribute: React.FC<Props> = ({ attributeDetails, onChan
                 type="email"
                 className="text-xs px-2 py-0.5 bg-custom-background-80 rounded w-full outline-none"
                 required={attributeDetails.is_required}
+                placeholder={attributeDetails.display_name}
                 {...field}
               />
             )}

web/components/custom-attributes/attribute-display/number.tsx

@@ -1,7 +1,8 @@
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
-
-// react-hook-form
 import { Controller, useForm } from "react-hook-form";
+
+// hooks
+import useOutsideClickDetector from "hooks/use-outside-click-detector";
 // ui
 import { ProgressBar } from "components/ui";
 // types
@@ -16,6 +17,8 @@ type Props = {
 export const CustomNumberAttribute: React.FC<Props> = ({ attributeDetails, onChange, value }) => {
   const [isEditing, setIsEditing] = useState(false);
 
+  const formRef = useRef(null);
+
   const { control, handleSubmit, reset, setFocus } = useForm({ defaultValues: { number: "" } });
 
   const handleFormSubmit = (data: { number: string }) => {
@@ -49,6 +52,10 @@ export const CustomNumberAttribute: React.FC<Props> = ({ attributeDetails, onCha
     };
   }, []);
 
+  useOutsideClickDetector(formRef, () => {
+    setIsEditing(false);
+  });
+
   const extraSettings = attributeDetails.extra_settings;
 
   return (
@@ -100,7 +107,7 @@ export const CustomNumberAttribute: React.FC<Props> = ({ attributeDetails, onCha
         </div>
       )}
       {isEditing && (
-        <form onSubmit={handleSubmit(handleFormSubmit)} className="flex items-center">
+        <form onSubmit={handleSubmit(handleFormSubmit)} className="flex items-center" ref={formRef}>
           <Controller
             control={control}
             name="number"
@@ -112,6 +119,7 @@ export const CustomNumberAttribute: React.FC<Props> = ({ attributeDetails, onCha
                 min={extraSettings.divided_by ? 0 : undefined}
                 max={extraSettings.divided_by ?? undefined}
                 required={attributeDetails.is_required}
+                placeholder={attributeDetails.display_name}
                 {...field}
               />
             )}

web/components/custom-attributes/attribute-display/text.tsx

@@ -1,7 +1,8 @@
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
-
-// react-hook-form
 import { Controller, useForm } from "react-hook-form";
+
+// hooks
+import useOutsideClickDetector from "hooks/use-outside-click-detector";
 // types
 import { ICustomAttribute } from "types";
 
@@ -18,6 +19,8 @@ export const CustomTextAttribute: React.FC<Props & { value: string | undefined }
 }) => {
   const [isEditing, setIsEditing] = useState(false);
 
+  const formRef = useRef(null);
+
   const { control, handleSubmit, reset, setFocus } = useForm({ defaultValues: { text: "" } });
 
   const handleFormSubmit = (data: { text: string }) => {
@@ -48,6 +51,10 @@ export const CustomTextAttribute: React.FC<Props & { value: string | undefined }
     };
   }, []);
 
+  useOutsideClickDetector(formRef, () => {
+    setIsEditing(false);
+  });
+
   return (
     <div className="flex-shrink-0">
       {!isEditing && (
@@ -55,11 +62,11 @@ export const CustomTextAttribute: React.FC<Props & { value: string | undefined }
           className="cursor-pointer text-xs truncate bg-custom-background-80 px-2.5 py-0.5 w-min max-w-full whitespace-nowrap rounded"
           onClick={() => setIsEditing(true)}
         >
-          {value && value !== "" ? value : `Enter ${attributeDetails.display_name}`}
+          {value && value !== "" ? value : "Empty"}
         </div>
       )}
       {isEditing && (
-        <form onSubmit={handleSubmit(handleFormSubmit)} className="flex items-center">
+        <form onSubmit={handleSubmit(handleFormSubmit)} className="flex items-center" ref={formRef}>
           <Controller
             control={control}
             name="text"
@@ -68,6 +75,7 @@ export const CustomTextAttribute: React.FC<Props & { value: string | undefined }
                 type="text"
                 className="text-xs px-2 py-0.5 bg-custom-background-80 rounded w-full outline-none"
                 required={attributeDetails.is_required}
+                placeholder={attributeDetails.display_name}
                 {...field}
               />
             )}

web/components/custom-attributes/attribute-display/url.tsx

@@ -1,7 +1,8 @@
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
-
-// react-hook-form
 import { Controller, useForm } from "react-hook-form";
+
+// hooks
+import useOutsideClickDetector from "hooks/use-outside-click-detector";
 // types
 import { ICustomAttribute } from "types";
 
@@ -18,6 +19,8 @@ export const CustomUrlAttribute: React.FC<Props & { value: string | undefined }>
 }) => {
   const [isEditing, setIsEditing] = useState(false);
 
+  const formRef = useRef(null);
+
   const { control, handleSubmit, reset, setFocus } = useForm({ defaultValues: { url: "" } });
 
   const handleFormSubmit = (data: { url: string }) => {
@@ -46,6 +49,10 @@ export const CustomUrlAttribute: React.FC<Props & { value: string | undefined }>
     };
   }, []);
 
+  useOutsideClickDetector(formRef, () => {
+    setIsEditing(false);
+  });
+
   return (
     <div className="flex-shrink-0">
       {!isEditing && (
@@ -63,7 +70,7 @@ export const CustomUrlAttribute: React.FC<Props & { value: string | undefined }>
         </div>
       )}
       {isEditing && (
-        <form onSubmit={handleSubmit(handleFormSubmit)} className="flex items-center">
+        <form onSubmit={handleSubmit(handleFormSubmit)} className="flex items-center" ref={formRef}>
           <Controller
             control={control}
             name="url"
@@ -72,6 +79,7 @@ export const CustomUrlAttribute: React.FC<Props & { value: string | undefined }>
                 type="url"
                 className="text-xs px-2 py-0.5 bg-custom-background-80 rounded w-full outline-none"
                 required={attributeDetails.is_required}
+                placeholder={attributeDetails.display_name}
                 {...field}
               />
             )}

web/components/custom-attributes/object-modal.tsx

@@ -221,7 +221,7 @@ export const ObjectModal: React.FC<Props> = observer((props) => {
                           <SecondaryButton onClick={handleClose}>Close</SecondaryButton>
                         )}
                         <PrimaryButton type="submit" loading={isSubmitting}>
-                          {data
+                          {objectId
                             ? isSubmitting
                               ? "Saving..."
                               : "Save changes"
@@ -234,7 +234,7 @@ export const ObjectModal: React.FC<Props> = observer((props) => {
                   </form>
                   {objectId && (
                     <>
-                      <div className="px-6 pb-5">
+                      <div className="px-6">
                         <h4 className="font-medium">Attributes</h4>
                         <div className="mt-2 space-y-2">
                           {customAttributes.fetchObjectDetailsLoader ? (