v0.12.38 event form bug fixes

backend/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rosterchirp-backend",
-  "version": "0.12.37",
+  "version": "0.12.38",
   "description": "RosterChirp backend server",
   "main": "src/index.js",
   "scripts": {

build.sh

@@ -13,7 +13,7 @@
 # ─────────────────────────────────────────────────────────────
 set -euo pipefail
 
-VERSION="${1:-0.12.37}"
+VERSION="${1:-0.12.38}"
 ACTION="${2:-}"
 REGISTRY="${REGISTRY:-}"
 IMAGE_NAME="rosterchirp"

frontend/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rosterchirp-frontend",
-  "version": "0.12.37",
+  "version": "0.12.38",
   "private": true,
   "scripts": {
     "dev": "vite",

frontend/src/components/MobileEventForm.jsx

@@ -68,15 +68,48 @@ function fmt12(val) {
   return `${h}:${String(mm).padStart(2,'0')} ${ampm}`;
 }
 
-// Mobile TimeInput — same behaviour as desktop but styled for mobile inline use
+// Mobile TimeInput — free-text time entry with smart-positioned scrollable dropdown
 function TimeInputMobile({ value, onChange }) {
   const [open, setOpen] = useState(false);
   const [inputVal, setInputVal] = useState(fmt12(value));
+  const [keyboardOffset, setKeyboardOffset] = useState(0);
+  const [dropdownPos, setDropdownPos] = useState({ top: 0, bottom: 'auto', left: 0 });
   const wrapRef = useRef(null);
   const listRef = useRef(null);
 
   useEffect(() => { setInputVal(fmt12(value)); }, [value]);
 
+  // Detect keyboard height via Visual Viewport API
+  useEffect(() => {
+    const handleViewportChange = () => {
+      if (window.visualViewport) {
+        const offset = window.innerHeight - window.visualViewport.height;
+        setKeyboardOffset(offset > 0 ? offset : 0);
+      }
+    };
+    if (open) {
+      handleViewportChange();
+      window.visualViewport?.addEventListener('resize', handleViewportChange);
+      return () => window.visualViewport?.removeEventListener('resize', handleViewportChange);
+    } else {
+      setKeyboardOffset(0);
+    }
+  }, [open]);
+
+  // Calculate dropdown pixel position using getBoundingClientRect (required for position:fixed)
+  useEffect(() => {
+    if (open && wrapRef.current) {
+      const rect = wrapRef.current.getBoundingClientRect();
+      const dropdownHeight = 5 * 40;
+      const spaceBelow = window.innerHeight - rect.bottom - keyboardOffset;
+      if (spaceBelow >= dropdownHeight) {
+        setDropdownPos({ top: rect.bottom, bottom: 'auto', left: rect.left });
+      } else {
+        setDropdownPos({ top: 'auto', bottom: window.innerHeight - rect.top + keyboardOffset, left: rect.left });
+      }
+    }
+  }, [open, keyboardOffset]);
+
   useEffect(() => {
     if (!open || !listRef.current) return;
     const idx = TIME_SLOTS.findIndex(s => s.value === value);
@@ -100,22 +133,30 @@ function TimeInputMobile({ value, onChange }) {
   return (
     <div ref={wrapRef} style={{ position: 'relative', display: 'inline-block' }}>
       <input
+        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="off"
+        inputMode="text"
+        enterKeyHint="done"
         style={{ fontSize: 15, color: 'var(--primary)', fontWeight: 600, background: 'transparent', border: 'none', outline: 'none', cursor: 'text', width: 90 }}
       />
       {open && (
         <div
           ref={listRef}
           style={{
-            position: 'fixed', zIndex: 400,
+            position: 'fixed',
+            zIndex: 9999,
+            top: dropdownPos.top,
+            bottom: dropdownPos.bottom,
+            left: dropdownPos.left,
             background: 'var(--surface)', border: '1px solid var(--border)',
             borderRadius: 8, boxShadow: '0 4px 20px rgba(0,0,0,0.2)',
             width: 130, maxHeight: 5 * 40, overflowY: 'auto',
+            pointerEvents: 'auto',
           }}
         >
           {TIME_SLOTS.map(s => (
@@ -520,8 +561,8 @@ export default function MobileEventForm({ event, eventTypes, userGroups, selecte
         </div>
 
         {/* End date/time */}
-        <div onClick={()=>setShowEndDate(true)} style={{ display:'flex',alignItems:'center',padding:'6px 20px 14px 56px',cursor:'pointer',borderBottom:'1px solid var(--border)' }}>
+        <div style={{ display:'flex',alignItems:'center',padding:'6px 20px 14px 56px',borderBottom:'1px solid var(--border)' }}>
-          <span style={{ flex:1,fontSize:15,color:'var(--text-secondary)' }}>{fmtDateDisplay(ed)}</span>
+          <span onClick={()=>setShowEndDate(true)} style={{ flex:1,fontSize:15,color:'var(--text-secondary)',cursor:'pointer' }}>{fmtDateDisplay(ed)}</span>
           {!allDay && (
             <TimeInputMobile value={et} onChange={newEt => {
               setEt(newEt);

frontend/src/components/SchedulePage.jsx

@@ -153,7 +153,7 @@ function TimeInput({ value, onChange, style }) {
   // Keep display in sync when value changes externally
   useEffect(() => { setInputVal(fmt12(value)); }, [value]);
 
-  // Scroll the dropdown so the selected slot is near the top
+  // Scroll the dropdown so that selected slot is near the top
   useEffect(() => {
     if (!open || !listRef.current) return;
     const idx = TIME_SLOTS.findIndex(s => s.value === value);
@@ -185,6 +185,7 @@ function TimeInput({ value, onChange, style }) {
   return (
     <div ref={wrapRef} style={{ position: 'relative', ...style }}>
       <input
+        type="text"
         className="input"
         value={inputVal}
         onChange={e => setInputVal(e.target.value)}
@@ -196,17 +197,20 @@ function TimeInput({ value, onChange, style }) {
         onKeyDown={e => { if (e.key === 'Enter') { e.preventDefault(); commit(inputVal); } if (e.key === 'Escape') { setInputVal(fmt12(value)); setOpen(false); } }}
         style={{ width: '100%', cursor: 'text' }}
         autoComplete="off"
+        inputMode="text"
+        enterKeyHint="done"
         placeholder="9:00 AM"
       />
       {open && (
         <div
           ref={listRef}
           style={{
-            position: 'absolute', top: '100%', left: 0, zIndex: 300,
+            position: 'absolute', top: '100%', left: 0, zIndex: 9999,
             background: 'var(--surface)', border: '1px solid var(--border)',
             borderRadius: 'var(--radius)', boxShadow: '0 4px 16px rgba(0,0,0,0.15)',
             width: '100%', minWidth: 120,
             maxHeight: 5 * 36, overflowY: 'auto',
+            pointerEvents: 'auto',
           }}
         >
           {TIME_SLOTS.map(s => (
@@ -350,7 +354,7 @@ function MobileScheduleFilter({ selected, onMonthChange, view, eventTypes, filte
         <div style={{padding:'8px 12px 12px',borderTop:'1px solid var(--border)'}}>
           <div style={{position:'relative',marginBottom:8}}>
             <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="var(--text-tertiary)" strokeWidth="2" style={{position:'absolute',left:9,top:'50%',transform:'translateY(-50%)',pointerEvents:'none'}}><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
-            <input value={filterKeyword} onChange={e => onFilterKeyword(e.target.value)} autoComplete="off" onFocus={onInputFocus} onBlur={onInputBlur}
+            <input value={filterKeyword} onChange={e => onFilterKeyword(e.target.value)} autoComplete="new-password" onFocus={onInputFocus} onBlur={onInputBlur}
               placeholder="Search events…" autoCorrect="off" autoCapitalize="off" spellCheck={false}
               style={{width:'100%',padding:'7px 8px 7px 28px',border:'1px solid var(--border)',borderRadius:'var(--radius)',background:'var(--background)',color:'var(--text-primary)',fontSize:13,boxSizing:'border-box'}}/>
           </div>
@@ -389,7 +393,7 @@ function EventTypePopup({ userGroups, onSave, onClose, editing=null }) {
   };
   return (
     <div style={{position:'absolute',top:'100%',left:0,zIndex:300,background:'var(--surface)',border:'1px solid var(--border)',borderRadius:'var(--radius)',padding:16,width:270,boxShadow:'0 4px 20px rgba(0,0,0,0.2)'}}>
-      <div style={{marginBottom:8}}><label className="settings-section-label">Name</label><input className="input" value={name} onChange={e => setName(e.target.value)} autoComplete="off" autoCorrect="off" style={{marginTop:4}} autoFocus/></div>
+      <div style={{marginBottom:8}}><label className="settings-section-label">Name</label><input className="input" value={name} onChange={e => setName(e.target.value)} autoComplete="new-password" autoCorrect="off" style={{marginTop:4}} autoFocus/></div>
       <div style={{marginBottom:8}}><label className="settings-section-label">Colour</label><input type="color" value={colour} onChange={e => setColour(e.target.value)} style={{marginTop:4,width:'100%',height:32,padding:2,borderRadius:4,border:'1px solid var(--border)'}}/></div>
       <div style={{marginBottom:8}}><label className="settings-section-label">Default Group</label><select className="input" value={groupId} onChange={e=>setGroupId(e.target.value)} style={{marginTop:4}}><option value="">None</option>{userGroups.map(g=><option key={g.id} value={g.id}>{g.name}</option>)}</select></div>
       <div style={{marginBottom:12}}>
@@ -453,7 +457,7 @@ function CustomRecurrenceFields({ rule, onChange }) {
     <div style={{border:'1px solid var(--border)',borderRadius:'var(--radius)',padding:12,display:'flex',flexDirection:'column',gap:10}}>
       <div style={{display:'flex',alignItems:'center',gap:8,fontSize:13}}>
         <span style={{color:'var(--text-tertiary)'}}>Every</span>
-        <input type="number" className="input" min={1} max={99} value={rule.interval||1} onChange={e => upd('interval',Math.max(1,parseInt(e.target.value)||1))} autoComplete="off" style={{width:60,textAlign:'center'}}/>
+        <input type="number" className="input" min={1} max={99} value={rule.interval||1} onChange={e => upd('interval',Math.max(1,parseInt(e.target.value)||1))} autoComplete="new-password" style={{width:60,textAlign:'center'}}/>
         <select className="input" value={rule.unit||'week'} onChange={e=>upd('unit',e.target.value)} style={{flex:1}}>
           {['day','week','month','year'].map(u=><option key={u} value={u}>{u}{(rule.interval||1)>1?'s':''}</option>)}
         </select>
@@ -475,8 +479,8 @@ function CustomRecurrenceFields({ rule, onChange }) {
           <label key={val} style={{display:'flex',alignItems:'center',gap:10,marginBottom:6,fontSize:13,cursor:'pointer'}}>
             <input type="radio" name="recur_ends" checked={(rule.ends||'never')===val} onChange={()=>upd('ends',val)}/>
             {lbl}
-            {val==='on' && (rule.ends||'never')==='on' && <input type="date" className="input" value={rule.endDate||''} onChange={e => upd('endDate',e.target.value)} autoComplete="off" style={{marginLeft:8,flex:1}}/>}
+            {val==='on' && (rule.ends||'never')==='on' && <input type="date" className="input" value={rule.endDate||''} onChange={e => upd('endDate',e.target.value)} autoComplete="new-password" style={{marginLeft:8,flex:1}}/>}
-            {val==='after' && (rule.ends||'never')==='after' && <><input type="number" className="input" min={1} max={999} value={rule.endCount||13} onChange={e => upd('endCount',parseInt(e.target.value)||1)} autoComplete="off" style={{width:64,textAlign:'center',marginLeft:8}}/><span style={{color:'var(--text-tertiary)'}}>occurrences</span></>}
+            {val==='after' && (rule.ends||'never')==='after' && <><input type="number" className="input" min={1} max={999} value={rule.endCount||13} onChange={e => upd('endCount',parseInt(e.target.value)||1)} autoComplete="new-password" style={{width:64,textAlign:'center',marginLeft:8}}/><span style={{color:'var(--text-tertiary)'}}>occurrences</span></>}
           </label>
         ))}
       </div>
@@ -663,10 +667,13 @@ function EventForm({ event, userGroups, eventTypes, selectedDate, onSave, onCanc
   return (
     <>
     <div style={{width:'100%',maxWidth:1024,overflowX:'auto'}}>
+      {/* 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="off" onSubmit={e => e.preventDefault()}>
       <div style={{minWidth:500}} onKeyDown={e=>{if(e.key==='Enter'&&e.target.tagName!=='TEXTAREA') e.preventDefault();}}>
         {/* Title */}
         <div style={{marginBottom:20}}>
-          <input className="input" placeholder="Add title" value={title} onChange={e => setTitle(e.target.value)} autoComplete="off" autoCorrect="off" autoCapitalize="sentences" style={{fontSize:20,fontWeight:700,border:'none',borderBottom:'2px solid var(--border)',borderRadius:0,padding:'4px 0',background:'transparent',width:'100%'}}/>
+          <input className="input" placeholder="Add title" value={title} onChange={e => setTitle(e.target.value)} autoComplete="new-password" autoCorrect="off" autoCapitalize="sentences" style={{fontSize:20,fontWeight:700,border:'none',borderBottom:'2px solid var(--border)',borderRadius:0,padding:'4px 0',background:'transparent',width:'100%'}}/>
         </div>
 
         {/* Event Type */}
@@ -685,7 +692,7 @@ function EventForm({ event, userGroups, eventTypes, selectedDate, onSave, onCanc
         <FormRow label="Date & Time">
           <div style={{display:'flex',flexDirection:'column',gap:8}}>
             <div style={{display:'flex',alignItems:'center',gap:8,flexWrap:'nowrap'}}>
-              <input type="date" className="input" value={sd} onChange={e => setSd(e.target.value)} autoComplete="off" style={{width:150,flexShrink:0}}/>
+              <input type="date" className="input" value={sd} onChange={e => setSd(e.target.value)} autoComplete="new-password" style={{width:150,flexShrink:0}}/>
               {!allDay&&(
                 <>
                   <TimeInput value={st} onChange={setSt} style={{width:120,flexShrink:0}}/>
@@ -694,7 +701,7 @@ function EventForm({ event, userGroups, eventTypes, selectedDate, onSave, onCanc
                     setEt(newEt); userSetEndTime.current=true;
                     if(sd===ed && newEt<=st){ const d=new Date(buildISO(sd,st)); d.setDate(d.getDate()+1); const p=n=>String(n).padStart(2,'0'); setEd(`${d.getFullYear()}-${p(d.getMonth()+1)}-${p(d.getDate())}`); }
                   }} style={{width:120,flexShrink:0}}/>
-                  <input type="date" className="input" value={ed} onChange={e => {setEd(e.target.value);userSetEndTime.current=true;}} autoComplete="off" style={{width:150,flexShrink:0}}/>
+                  <input type="date" className="input" value={ed} onChange={e => {setEd(e.target.value);userSetEndTime.current=true;}} autoComplete="new-password" style={{width:150,flexShrink:0}}/>
                 </>
               )}
             </div>
@@ -752,12 +759,12 @@ function EventForm({ event, userGroups, eventTypes, selectedDate, onSave, onCanc
 
         {/* Location */}
         <FormRow label="Location">
-          <input className="input" placeholder="Add location" value={loc} onChange={e => setLoc(e.target.value)} autoComplete="off" autoCorrect="off" autoCapitalize="off" />
+          <input className="input" placeholder="Add location" value={loc} onChange={e => setLoc(e.target.value)} autoComplete="new-password" autoCorrect="off" autoCapitalize="off" />
         </FormRow>
 
         {/* Description */}
         <FormRow label="Description">
-          <textarea className="input" placeholder="Add description" value={desc} onChange={e=>setDesc(e.target.value)} rows={3} autoComplete="off" autoCorrect="off" style={{resize:'vertical'}}/>
+          <textarea className="input" placeholder="Add description" value={desc} onChange={e=>setDesc(e.target.value)} rows={3} autoComplete="new-password" autoCorrect="off" style={{resize:'vertical'}}/>
         </FormRow>
 
         <div style={{display:'flex',gap:8,marginTop:8}}>
@@ -766,6 +773,7 @@ function EventForm({ event, userGroups, eventTypes, selectedDate, onSave, onCanc
           {event&&(isToolManager||(userId&&event.created_by===userId))&&<button className="btn btn-sm" style={{marginLeft:'auto',background:'var(--error)',color:'white'}} onClick={()=>onDelete(event)}>Delete</button>}
         </div>
       </div>
+      </form>
     </div>
     {showScopeModal&&<RecurringChoiceModal title="Edit recurring event" onConfirm={doSave} onCancel={()=>setShowScopeModal(false)}/>}
     </>
@@ -989,7 +997,7 @@ function EventTypesPanel({ eventTypes, userGroups, onUpdated, isMobile=false })
               <span style={{fontWeight:700,fontSize:16}}>{sheetMode==='create'?'New Event Type':'Edit Event Type'}</span>
               <button onClick={closeSheet} style={{background:'none',border:'none',cursor:'pointer',color:'var(--text-secondary)',fontSize:20,lineHeight:1}}>✕</button>
             </div>
-            <input autoFocus value={sheetName} onChange={e => setSheetName(e.target.value)} autoComplete="off" autoCorrect="off" onKeyDown={e=>e.key==='Enter'&&saveSheet()} placeholder="Type name…"
+            <input autoFocus value={sheetName} onChange={e => setSheetName(e.target.value)} autoComplete="new-password" autoCorrect="off" onKeyDown={e=>e.key==='Enter'&&saveSheet()} placeholder="Type name…"
               style={{width:'100%',padding:'12px 14px',border:'1px solid var(--border)',borderRadius:'var(--radius)',fontSize:16,marginBottom:12,boxSizing:'border-box',background:'var(--background)',color:'var(--text-primary)'}}/>
             <div style={{display:'flex',alignItems:'center',gap:12,marginBottom:16}}>
               <label style={{fontSize:14,color:'var(--text-tertiary)',flexShrink:0}}>Colour</label>
@@ -1711,7 +1719,7 @@ export default function SchedulePage({ isToolManager, isMobile, onProfile, onHel
                 className="input"
                 placeholder={`Keyword… (space = OR, "phrase")`}
                 value={filterKeyword}
-                onChange={e => { setFilterKeyword(e.target.value); if (!e.target.value) setFilterFromDate(null); }} autoComplete="off" autoCorrect="off" autoCapitalize="off" spellCheck={false}
+                onChange={e => { setFilterKeyword(e.target.value); if (!e.target.value) setFilterFromDate(null); }} autoComplete="new-password" autoCorrect="off" autoCapitalize="off" spellCheck={false}
                 style={{ marginBottom:8, fontSize:13 }} />
               <select
                 className="input"

frontend/src/components/UserManagerModal.jsx

@@ -290,6 +290,9 @@ export default function UserManagerModal({ onClose }) {
   return (
     <div className="modal-overlay" onClick={e => e.target === e.currentTarget && onClose()}>
       <div className="modal" style={{ maxWidth: 600, width: '100%' }}>
+        {/* form wrapper suppresses Chrome Android's autofill chip bar; autoComplete="off"
+            on individual inputs is ignored by Chrome but respected on the form element */}
+        <form autoComplete="off" onSubmit={e => e.preventDefault()}>
         <div className="flex items-center justify-between" style={{ marginBottom: 20 }}>
           <h2 className="modal-title" style={{ margin: 0 }}>User Manager</h2>
           <button className="btn-icon" onClick={onClose}>
@@ -421,6 +424,7 @@ export default function UserManagerModal({ onClose }) {
             )}
           </div>
         )}
+        </form>
       </div>
     </div>
   );

frontend/src/pages/UserManagerPage.jsx

@@ -241,7 +241,7 @@ function UserForm({ user, userPass, allUserGroups, onDone, onCancel, isMobile, o
           value={email} onChange={e => setEmail(e.target.value)}
           disabled={isEdit}
           style={{ width:'100%', ...(isEdit ? { opacity:0.6, cursor:'not-allowed' } : {}) }}
-          autoComplete="off" autoCorrect="off" autoCapitalize="off" spellCheck="false" onFocus={onIF} onBlur={onIB} />
+          autoComplete="new-password" autoCorrect="off" autoCapitalize="off" spellCheck="false" onFocus={onIF} onBlur={onIB} />
       </div>
 
       {/* Row 2: First Name + Last Name */}
@@ -250,13 +250,13 @@ function UserForm({ user, userPass, allUserGroups, onDone, onCancel, isMobile, o
           {lbl('First Name', true)}
           <input className="input" placeholder="Jane"
             value={firstName} onChange={e => setFirstName(e.target.value)}
-            autoComplete="off" autoCapitalize="words" onFocus={onIF} onBlur={onIB} />
+            autoComplete="new-password" autoCapitalize="words" onFocus={onIF} onBlur={onIB} />
         </div>
         <div>
           {lbl('Last Name', true)}
           <input className="input" placeholder="Smith"
             value={lastName} onChange={e => setLastName(e.target.value)}
-            autoComplete="off" autoCapitalize="words" onFocus={onIF} onBlur={onIB} />
+            autoComplete="new-password" autoCapitalize="words" onFocus={onIF} onBlur={onIB} />
         </div>
       </div>
 
@@ -266,7 +266,7 @@ function UserForm({ user, userPass, allUserGroups, onDone, onCancel, isMobile, o
           {lbl('Phone', false, '(optional)')}
           <input className="input" type="tel" placeholder="+1 555 000 0000"
             value={phone} onChange={e => setPhone(e.target.value)}
-            autoComplete="off" onFocus={onIF} onBlur={onIB} />
+            autoComplete="new-password" onFocus={onIF} onBlur={onIB} />
         </div>
         <div>
           {lbl('App Role', true)}
@@ -621,6 +621,9 @@ export default function UserManagerPage({ isMobile = false, onProfile, onHelp, o
         )}
 
         {/* Content */}
+        {/* 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="new-password" onSubmit={e => e.preventDefault()}>
         <div style={{ flex:1, display:'flex', flexDirection:'column', overflow:'hidden', minHeight:0, background:'var(--background)' }}>
 
           {/* LIST VIEW */}
@@ -629,7 +632,7 @@ export default function UserManagerPage({ isMobile = false, onProfile, onHelp, o
               <div style={{ padding:'16px 16px 8px', flexShrink:0 }}>
                 <input className="input" placeholder="Search users…" value={search} onChange={e => setSearch(e.target.value)}
                   onFocus={onIF} onBlur={onIB}
-                  autoComplete="off" autoCorrect="off" spellCheck={false}
+                    autoComplete="new-password" autoCorrect="off" spellCheck={false}
                   style={{ width:'100%', maxWidth: isMobile ? '100%' : 400 }} />
               </div>
               <div style={{ flex:1, overflowY:'auto', padding:'0 16px', paddingBottom: isMobile ? 'calc(82px + env(safe-area-inset-bottom, 0px))' : 16, overscrollBehavior:'contain' }}>
@@ -677,6 +680,7 @@ export default function UserManagerPage({ isMobile = false, onProfile, onHelp, o
             </div>
           )}
         </div>
+        </form>
 
         {/* Mobile footer — fixed, hidden when keyboard is up */}
         {isMobile && !inputFocused && (