bug fix clean-up

frontend/src/components/MobileEventForm.jsx

@@ -74,26 +74,22 @@ function TimeInputMobile({ value, onChange }) {
   const [inputVal, setInputVal] = useState(fmt12(value));
   const wrapRef = useRef(null);
   const listRef = useRef(null);
-  const inputRef = useRef(null);
 
   useEffect(() => { setInputVal(fmt12(value)); }, [value]);
 
-  // Programmatically disable autocomplete after mount
-  useEffect(() => {
-    if (inputRef.current) {
-      inputRef.current.setAttribute('autocomplete', 'off');
-      inputRef.current.setAttribute('autocorrect', 'off');
-      inputRef.current.setAttribute('autocapitalize', 'off');
-      inputRef.current.setAttribute('spellcheck', 'false');
-    }
-  }, []);
-
   useEffect(() => {
     if (!open || !listRef.current) return;
     const idx = TIME_SLOTS.findIndex(s => s.value === value);
     if (idx >= 0) listRef.current.scrollTop = idx * 40 - 40;
   }, [open, value]);
 
+  useEffect(() => {
+    if (!open) return;
+    const h = e => { if (wrapRef.current && !wrapRef.current.contains(e.target)) setOpen(false); };
+    document.addEventListener('mousedown', h);
+    return () => document.removeEventListener('mousedown', h);
+  }, [open]);
+
   const commit = (raw) => {
     const parsed = parseTypedTime(raw);
     if (parsed) { onChange(parsed); setInputVal(fmt12(parsed)); }
@@ -104,16 +100,13 @@ function TimeInputMobile({ value, onChange }) {
   return (
     <div ref={wrapRef} style={{ position: 'relative', display: 'inline-block' }}>
       <input
-        ref={inputRef}
         type="text"
         value={inputVal}
         onChange={e => setInputVal(e.target.value)}
         onFocus={() => setOpen(true)}
         onBlur={e => setTimeout(() => commit(e.target.value), 150)}
         onKeyDown={e => { if (e.key === 'Enter') { e.preventDefault(); commit(inputVal); } if (e.key === 'Escape') { setInputVal(fmt12(value)); setOpen(false); } }}
-        autoComplete="nope"
-        data-autocomplete="off"
-        inputMode="none"
+        autoComplete="off"
         style={{ fontSize: 15, color: 'var(--primary)', fontWeight: 600, background: 'transparent', border: 'none', outline: 'none', cursor: 'text', width: 90 }}
       />
       {open && (
@@ -492,7 +485,7 @@ export default function MobileEventForm({ event, eventTypes, userGroups, selecte
 
       {/* form wrapper suppresses Chrome Android's autofill chip bar; autoComplete="new-password"
           on individual inputs is ignored by Chrome but respected on the form element */}
-      <form autoComplete="nope" onSubmit={e => e.preventDefault()} style={{ flex:1,overflowY:'auto' }}>
+      <form autoComplete="off" onSubmit={e => e.preventDefault()} style={{ flex:1,overflowY:'auto' }}>
         {/* Title */}
         <div style={{ padding:'16px 20px',borderBottom:'1px solid var(--border)' }}>
           <input value={title} onChange={e => setTitle(e.target.value)} autoComplete="new-password" placeholder="Add title" autoCorrect="off" autoCapitalize="sentences" spellCheck={false} style={{ width:'100%',border:'none',background:'transparent',fontSize:22,fontWeight:700,color:'var(--text-primary)',outline:'none' }}/>