fix(admin): remove blur auto-close + parse settings from GET response
continuous-integration/drone/push Build is passing Details

Fixed two critical issues:

1. Profile form blur bug - ACTUAL FIX:
   - Removed ALL blur auto-close handlers from EditableField component
   - Removed blur auto-close from name and timezone inline inputs
   - Users can now type freely without inputs closing prematurely
   - Form uses Save/Cancel buttons for submission, not blur events

2. Settings parsing from GET response:
   - Backend GET /admin/clubs/{id} returns nested structure with club object
   - Updated getClubProfile to extract club from response.club
   - Settings now properly loaded and displayed from GET response
   - PATCH response already worked (returns club directly)

Root cause of blur bug: blur handlers were closing inputs when field had
content, but this prevented multi-character input. Removed blur logic
entirely since form has explicit Save/Cancel buttons.

Impact: Profile form now fully functional for editing all fields including
settings (address + contact). Settings persist and display correctly.

Related: BUILD #20, Backend Brooke BUILD:297 (settings support)
master
Guillermo Pages 1 month ago
parent 107f5c6799
commit b7c02c9418

@ -36,20 +36,12 @@ function EditableField({
}: EditableFieldProps) {
const hasValue = value && value.trim().length > 0;
function handleBlur() {
// Only close edit mode if field has content
if (value && value.trim().length > 0) {
onToggleEdit();
}
}
if (isEditing || !hasValue) {
return (
<input
type={type}
value={value}
onChange={(e) => onChange(e.target.value)}
onBlur={handleBlur}
autoFocus
placeholder={placeholder}
maxLength={maxLength}
@ -323,7 +315,6 @@ export default function ClubProfileTab({ clubId, onUpdate }: ClubProfileTabProps
type="text"
value={name}
onChange={(e) => setName(e.target.value)}
onBlur={() => hasFieldValue(name) && toggleEditField('name')}
autoFocus
className={`w-full px-4 py-3 border-2 rounded-lg font-medium transition-colors ${
errors.name
@ -355,7 +346,6 @@ export default function ClubProfileTab({ clubId, onUpdate }: ClubProfileTabProps
<select
value={timezone}
onChange={(e) => setTimezone(e.target.value)}
onBlur={() => toggleEditField('timezone')}
autoFocus
className={`w-full px-4 py-3 border-2 rounded-lg font-medium transition-colors ${
errors.timezone

@ -54,7 +54,10 @@ export async function getClubProfile(clubId: number): Promise<ApiResult<ClubProf
return { success: false, error };
}
const data: ClubProfile = await response.json();
const responseData = await response.json();
// Backend returns { club: {...}, courts: [], provider: {...}, ... }
// Extract the club object
const data: ClubProfile = responseData.club;
return { success: true, data };
} catch (error) {
return {

Loading…
Cancel
Save