Dropzone drag and drop doesn't work on macOS

[JalenWasHere]

Describe the bug The drag and drop example in the official documentation does not work with macOS systems. Can't seem to make it work in my codebase either. Clicking to upload does work, drag and drop examples on other sites work fine for me.

To Reproduce

1. Use a device running macOS
2. Open Google Chrome
3. Navigate to https://flowbite.com/docs/forms/file-input/#dropzone
4. Try drag and dropping in the example

Expected behavior For the dropzone to recognise that I dropped a file and for it to process that file.

Screenshots

Desktop (please complete the following information):

• OS: macOS
• Browser: Chrome
• Version: Version 131.0.6778.205 (Official Build) (x86_64)

[emergingdzns]

Same issue here. I am confident that flowbite is working because other elements I've added are rendering properly. But I can try clicking the dropzone and nothing happens. I tried dragging an image onto it and it just opens a new tab with the image in view.

[trongbinh15]

+1

[TrevorSayre]

This is likely suffering the same issue as #447 which is resolved by the comment: https://github.com/themesberg/flowbite/issues/447#issuecomment-1460270937

Ensure container has position relative, and change hidden class to absolute top-0 left-0 w-full h-full opacity-0 cursor-pointer

This is working for me on macOS

import { FileInput, Label } from "flowbite-react";

export function Component() {
  return (
    <div className="flex w-full items-center justify-center">
      <Label
        htmlFor="dropzone-file"
        className="relative flex h-64 w-full cursor-pointer flex-col items-center justify-center rounded-lg border-2 border-dashed border-gray-300 bg-gray-50 hover:bg-gray-100 dark:border-gray-600 dark:bg-gray-700 dark:hover:border-gray-500 dark:hover:bg-gray-600"
      >
        <div className="flex flex-col items-center justify-center pb-6 pt-5">
          <svg
            className="mb-4 h-8 w-8 text-gray-500 dark:text-gray-400"
            aria-hidden="true"
            xmlns="http://www.w3.org/2000/svg"
            fill="none"
            viewBox="0 0 20 16"
          >
            <path
              stroke="currentColor"
              strokeLinecap="round"
              strokeLinejoin="round"
              strokeWidth="2"
              d="M13 13h3a3 3 0 0 0 0-6h-.025A5.56 5.56 0 0 0 16 6.5 5.5 5.5 0 0 0 5.207 5.021C5.137 5.017 5.071 5 5 5a4 4 0 0 0 0 8h2.167M10 15V6m0 0L8 8m2-2 2 2"
            />
          </svg>
          <p className="mb-2 text-sm text-gray-500 dark:text-gray-400">
            <span className="font-semibold">Click to upload</span> or drag and
            drop
          </p>
          <p className="text-xs text-gray-500 dark:text-gray-400">
            SVG, PNG, JPG or GIF (MAX. 800x400px)
          </p>
        </div>
        <FileInput
          id="dropzone-file"
          className="absolute top-0 left-0 w-full h-full opacity-0 cursor-pointer"
          onChange={(e) => {
            console.log(e.target.files);
          }}
        />
      </Label>
    </div>
  );
}