Update TimeInput close time picker when clicking outside

src/components/TimeInput.js

@@ -4,11 +4,29 @@ const TimeInput = ({ value, onChange }) => {
   const [displayValue, setDisplayValue] = React.useState(value);
   const [isPickerOpen, setIsPickerOpen] = React.useState(false);
   const [pickerHours, pickerMinutes] = (value || "00:00").split(':').map(Number);
+  const pickerRef = React.useRef(null);
 
   React.useEffect(() => {
     setDisplayValue(value);
   }, [value]);
 
+  React.useEffect(() => {
+    // Close the picker when clicking outside
+    const handleClickOutside = (event) => {
+      if (pickerRef.current && !pickerRef.current.contains(event.target)) {
+        setIsPickerOpen(false);
+      }
+    };
+
+    if (isPickerOpen) {
+      document.addEventListener('mousedown', handleClickOutside);
+    }
+
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [isPickerOpen]);
+
   const handleBlur = (e) => {
     let input = e.target.value.replace(/[^0-9]/g, '');
     let hours = '00', minutes = '00';
@@ -64,7 +82,7 @@ const TimeInput = ({ value, onChange }) => {
         </svg>
       </button>
       {isPickerOpen && (
-        <div className="absolute top-full mt-2 z-10 bg-white p-4 rounded-lg shadow-xl border w-64">
+        <div ref={pickerRef} className="absolute top-full mt-2 z-10 bg-white p-4 rounded-lg shadow-xl border w-64">
           <div className="text-center text-lg font-bold mb-3">{value}</div>
           <div>
             <div className="mb-2"><span className="font-semibold">Hour:</span></div>