IOS 17 camera capture not working in Next.js with <input type="file" capture>

Good day everyone,

I'm working on a Next.js project where I need to allow users to upload images using their device's camera. Here's the relevant snippet:

import { Loader2, Camera } from "lucide-react";

<div className="flex gap-2">
  <Input
    ref={fileInputRef}
    type="file"
    accept="image/*"
    capture={isAndroid ? "environment" : undefined}
    onChange={handleImageChange}
    className="w-full"
  />
  {isAndroid && (
    <Button
      type="button"
      onClick={openCamera}
      variant="outline"
      className="flex-shrink-0"
    >
      <Camera className="h-4 w-4" />
    </Button>
  )}
</div>

The issue: This works perfectly on iOS 16.7.10, but on iOS 17 (tested by a user with an iPhone running iOS 17), the camera doesn't open when the input is triggered.

Additional context:

I'm not using an iPhone myself, which makes debugging slower.

I’ve confirmed that the <input type="file" accept="image/*" capture> approach still works as expected on Android devices.

I suspect there may have been changes to the way Safari or iOS 17 handles media capture permissions or input behavior.

Has anyone encountered similar behavior on iOS 17.6.1? Is there an alternative or workaround to get camera input working reliably on newer iOS versions?

Thanks in advance!