File input click not opening dialog in Microsoft Edge despite successful API calls

Problem Summary

File input <input type="file"> click events are not opening the file selection dialog in Microsoft Edge, despite the same code working perfectly in Safari and other browsers. Drag-and-drop functionality works fine in Edge.

Environment

• Browser: Microsoft Edge (latest version)
• OS: macOS
• Framework: React 18 with Next.js
• Context: Secure context (HTTPS/localhost)

What Works

Drag and drop file selection works perfectly in Edge
Button click works perfectly in Safari and other browsers
All programmatic API calls return "success" but no dialog appears

What Doesn't Work

Any form of programmatic file input triggering in Edge
File selection dialog never appears despite "successful" API calls

Code Example

const FileUploadComponent = () => {
  const fileInputRef = useRef<HTMLInputElement>(null);

  const handleClick = () => {
    const fileInput = fileInputRef.current;
    if (!fileInput) return;

    // All of these appear to "succeed" but no dialog opens in Edge:
    
    // Method 1: Direct click
    fileInput.click(); // Returns undefined, no error
    
    // Method 2: showPicker API
    if ('showPicker' in fileInput) {
      fileInput.showPicker(); // No error thrown, appears successful
    }
    
    // Method 3: Focus then click
    fileInput.focus(); // Element gets focused successfully
    fileInput.click(); // No error, no dialog
  };

  return (
    <div>
      <button onClick={handleClick}>Select File</button>
      <input
        ref={fileInputRef}
        type="file"
        style={{ display: 'none' }}
        onChange={(e) => console.log('File selected:', e.target.files)}
      />
    </div>
  );
};

Debug Information

When clicking the button in Edge, console shows:

✅ File input element found
✅ showPicker() called successfully  
✅ Element successfully focused
✅ click() called successfully
✅ userActivation: true (initially)
❌ No file dialog appears
❌ onChange never fires

Attempted Solutions

Tried ALL of these approaches with no success:

1. Direct programmatic click: fileInput.click()
2. Modern showPicker API: fileInput.showPicker()
3. Focus then click: fileInput.focus(); fileInput.click()
4. Mouse event dispatching: fileInput.dispatchEvent(new MouseEvent('click'))
5. Label association: <label><input type="file"></label>
6. Temporary visibility: Making element visible during click
7. Invisible overlay: Positioning file input over button for direct user click
8. Event timing: Immediate vs setTimeout approaches

Key Observations

• User activation preserved: Click handlers are called synchronously from user events
• No JavaScript errors: All API calls complete without throwing
• Element state is correct: File input is connected, not disabled, properly focused
• Security context is valid: window.isSecureContext === true
• Works in other browsers: Identical code works in Safari, Chrome, Firefox

Question

What is Microsoft Edge specifically blocking that prevents file input dialogs from opening, even when using the modern showPicker() API and proper user activation?

Is there a specific Edge security policy, CSP header, or browser setting that could be interfering with file input functionality? Are there any Edge-specific workarounds for this issue?

Just need to update the browser **Face palm**