[dropdown] cannot use mouse on iPad

[jamessampford]

Bug Report

Similar to #1988 a number of dropdowns will not work upon clicking with a mouse on iPad (namely a trackpad in my case). This again is using iPadOS 14.6. As per the slider, touch events work as expected

Steps to reproduce

1. Click on each dropdown found on https://fomantic-ui.com/modules/dropdown.html most of the time there will be no response, ie. nothing happens on click

Expected result

All dropdowns should open

Actual result

A number of dropdowns do not open

Version

2.8.7

[lubber-de]

My same guess as for slider: The module checks for a touchdevice (which the ipad still is) and either binds touch or mouse events. As the mouse events are not bound, the mouse is not triggering the necessary events.

[mhthies]

Just as for #1988, the issue is caused by the distinction between touch and non-touch devices (see dropdown.js, line 702): On touch devices, only (!) touch events are handled, on non-touch devices (only) mouse events are handled.

Again, IMHO, the trivial solution would be removing this whole distinction and all the touch event binding code.

However, I learned from the Git history, that the distinction is required to mitigate some missing click events on iOS (#647, #1220), which seem to originate from strange behaviour in the mouse emulation of iOS Safari (see this StackOverflow thread: https://stackoverflow.com/questions/24077725/mobile-safari-sometimes-does-not-trigger-the-click-event). If the iOS issue in #647 could be fixed with one of the other workarounds, mentioned there, it would be possible to remove the special handling of touch events, as suggested above.

Otherwise, I would suggest always binding to both, mouse and touch events, and adding event.preventDefault() to the event handlers to avoid double-triggering through the browsers' mouse emulation.