[Bug] Safari click on custom idleLabel prop requires 2 clicks to trigger file upload dialog

[sparkcodeuk]

Is there an existing issue for this?

• I have searched the existing issues

Have you updated FilePond and its plugins?

• I have updated FilePond and its plugins

Describe the bug

When you have a custom labelIdle prop specified, on Safari desktop in OSX at least it requires 2 clicks to get the OS file dialog prompt if you click the label itself.

It appears to be a Safari desktop specific bug (tested with version 17.4.1 on OSX 14.4.1).

On Chrome & Firefox is works as expected, requiring only a single click no matter where you click in the filepond component, this appears to be Safari specific.

I have not had the time to test on mobile, no other browsers not listed or other operating systems.

Reproduction

• Have a react app which uses the component with a custom labelIdle prop
• In Safari specifically, with filepond in an unfocused state, if I click the blank area around the labelIdle contents the OS file dialog prompt appears as expected
• Try the same thing and click the labelIdle contents and it requires 2 clicks to get the OS file dialog prompt to appear
• If you press escape and click the same label contents it will subsequently only require a single click
• Unfocus from filepond, e.g., by selecting another form item, it will require 2 more clicks again
• If you do not specify a custom labelIdle prop, then this bug does not manifest and Safari only requires a single click when clicking on the default filepond label contents.

The labelIdle prop used to test this bug was a simple string value (i.e., no HTML required and the presence of a <span class="filepond--label-action"> tag does not alter the behaviour of this issue).

Environment

- Device: Desktop
- OS: OSX 14.4.1 (Sonoma)
- Browser: Safari (17.4.1) this appears to be a Safari specific bug