# Event Form OCR Button Visibility Fix

**Last Updated:** 2026-01-28

## Problem

The OCR business card scanner button ("Visitenkarte scannen") disappeared after form reset and didn't appear for subsequent lead submissions. Users couldn't scan business cards for new leads after submitting the first one.

## Root Causes

1. **Initialization Timing**: `BusinessCardScanner` initialized once on DOM ready, but camera scan section started hidden (`display: none`)
2. **Visibility Not Ensured**: Camera section visibility wasn't explicitly guaranteed in `resetForm()`
3. **No Re-initialization**: Scanner didn't re-check button availability after form reset
4. **Silent Failure**: Scanner constructor returned early if button not found, preventing later initialization

## Solution

Implemented comprehensive fixes to ensure OCR button appears every time form is shown:

### 1. Camera Section Visibility Helper

**File**: `v2/js/event-form.js`

**Added `ensureCameraSectionVisible()` method** (line ~2008):

```javascript
ensureCameraSectionVisible() {
    const cameraScanSection = document.getElementById('camera-scan-section');
    if (cameraScanSection) {
        cameraScanSection.style.display = 'block';

        // Verify it's actually visible (defensive check)
        const computedStyle = window.getComputedStyle(cameraScanSection);
        if (computedStyle.display === 'none') {
            cameraScanSection.style.display = 'block';
            cameraScanSection.style.visibility = 'visible';
        }
    }
}
```

### 2. Form Reset Updates

**File**: `v2/js/event-form.js`

**Updated `resetForm()` method** (line ~1688):

- Explicitly calls `ensureCameraSectionVisible()` before `showForm()`
- Guarantees OCR button appears for each new lead submission

**Updated `showForm()` method** (line ~1940):

- Uses `ensureCameraSectionVisible()` helper method
- Calls scanner re-initialization after showing form

### 3. Scanner Re-initialization

**File**: `v2/js/business-card-scanner.js`

**Updated constructor** (line ~12):

- Doesn't fail silently if button not found initially
- Stores flag `buttonNotFoundInitially` for later re-initialization
- Allows delayed initialization

**Added `reinitialize()` method** (line ~560):

- Re-checks for button availability
- Re-binds event listeners if button is now available
- Handles case where button wasn't found initially

**Added `ensureInitialized()` method** (line ~590):

- Checks if scanner is ready
- Re-initializes if needed
- Returns boolean indicating readiness

**Updated `init()` method** (line ~36):

- Re-checks for button if not found initially
- Sets `isInitialized` flag
- Handles delayed initialization gracefully

**Updated `setupEventListeners()` method** (line ~85):

- Removes existing listeners before adding new ones (prevents duplicates)
- Stores listener reference for potential removal

### 4. Integration Points

**File**: `v2/js/event-form.js`

**In `showForm()`** (line ~1942):

- Calls `window.businessCardScanner?.ensureInitialized()` after showing form
- Small delay (100ms) to ensure DOM is ready

**In `resetForm()`** (line ~1706):

- Calls `window.businessCardScanner?.ensureInitialized()` after form reset
- Slightly longer delay (150ms) after reset operations

## Files Modified

1. `v2/js/event-form.js`
   - Added `ensureCameraSectionVisible()` helper method
   - Updated `resetForm()` to ensure camera section visibility
   - Updated `showForm()` to ensure camera section visibility
   - Added scanner re-initialization calls

2. `v2/js/business-card-scanner.js`
   - Updated constructor to handle delayed initialization
   - Added `reinitialize()` method
   - Added `ensureInitialized()` method
   - Updated `init()` to handle re-initialization
   - Updated `setupEventListeners()` to prevent duplicate listeners

## Testing

### Manual Testing Checklist

- [x] OCR button visible on initial form load
- [x] Scanner button works on initial load
- [x] OCR button visible after form reset ("Add Another")
- [x] Scanner button works after form reset
- [x] OCR button visible after owner change
- [x] Scanner button works after owner change
- [x] Multiple form submissions work correctly
- [x] Scanner works for each new lead
- [x] No console errors related to scanner

### Test Scenarios

1. **Initial Load**:
   - Form loads → Camera section visible → Scanner button works ✅

2. **After Form Reset**:
   - Submit form → Click "Add Another" → Camera section visible → Scanner button works ✅

3. **After Owner Change**:
   - Change owner → Form resets → Camera section visible → Scanner button works ✅

4. **Multiple Submissions**:
   - Submit multiple leads in sequence → Camera section visible each time → Scanner works each time ✅

## Best Practices Applied

1. **Defensive Programming**: Check element existence before manipulation
2. **Re-initialization Pattern**: Allow components to re-check state after DOM changes
3. **Separation of Concerns**: Form handles visibility, scanner handles functionality
4. **Graceful Degradation**: Scanner works even if initialized before form is visible
5. **Explicit State Management**: Ensure camera section visibility at every form show
6. **Prevent Duplicate Listeners**: Remove existing listeners before adding new ones

## Prevention

To prevent this issue in the future:

1. **Always ensure visibility**: Call `ensureCameraSectionVisible()` when showing form
2. **Re-initialize components**: Call scanner `ensureInitialized()` after form operations
3. **Test form reset**: Always test OCR button visibility after form reset
4. **Handle delayed initialization**: Components should handle cases where elements aren't available initially

## Related Documentation

- [Event Form Implementation Guide](EVENT_FORM_IMPLEMENTATION.md)
- [Validation Test Checklist](EVENT_FORM_VALIDATION_TEST_CHECKLIST.md)
- [Error Message Fix Details](EVENT_FORM_ERROR_MESSAGE_FIX.md)