Semantic-ui: [Dropdown] not closing when clicked on arrow or dropdown itself on iOS and Android

[leonidas-o]

Tested on:

• Android 7 - default samsung browser, chrome
• iOS 10.3.2 - safari

How to reproduce:
If the arrow or dropdown is clicked, it opens, if again one of them is clicked, it closes and opens again. I spotted that on rare occasions it closes correctly. After a touch with different "speeds", so sometimes touch and hold a bit, sometimes normal touch/click and sometimes a fast barely touched click, it shows that it closes correctly on the last one.
So there is a timing problem, a normal touch is recognized as two clicks somehow.

[vinayakkulkarni]

For normal browsers, this worked for me:

$(".ui.dropdown").dropdown({
    forceSelection: false
});

also, see: #4693

[leonidas-o]

@vinayakkulkarni I've added:

$('.ui.dropdown').dropdown({
        selectOnKeydown: false,
        forceSelection: false
    });

But this has not solved the problem. Maybe this has worked on some earlier versions, but on 2.2.10 it is not.
The same behavior on all mentioned browsers.

[vinayakkulkarni]

Can you please try this and test : https://github.com/Semantic-Org/Semantic-UI/issues/4693#issuecomment-257109801

[leonidas-o]

Do you mean the comment with:

However setting:
$.fn.dropdown.settings.selectOnKeydown = false;
$.fn.dropdown.settings.forceSelection = false;
does the charm.

If so, look at my settings, that's is exactly what I've done, selectOnKeydown and forceSelection both to false. Or am I missing something here?

[vinayakkulkarni]

Ah yes.

[ronhornbaker]

This bug is causing a lot of pain here. You can easily reproduce it by visiting https://semantic-ui.com/modules/dropdown.html#/examples on iOS Safari, and tapping any of the dropdown examples... when I do it, I cannot get the dropdown to close by re-tapping it, I have to tap some other element or background of the document.

This causes significant a significant UX problem when you have several dropdowns in a row on mobile, because there is nowhere else on the visible document to click, so the dropdown menu is stuck open unless a value is chosen.

Interestingly, sometimes a _very_ quick and light tap will work to close the menu, if that gives you a clue. It seems to be related to touch duration.

I tried the setting suggested by @leonidas-o above, but it did not work.

[ronhornbaker]

FYI, I was able to fix the problem by adjusting the delay settings of the dropdown. The default settings are:

delay : { hide : 300, show : 200, search : 50, touch : 50 }

I changed the touch delay to 250ms, just longer than the default animation event duration of 200ms, like so:

delay : { hide : 300, show : 200, search : 50, touch : 250 }

and it works great on iOS Safari. 😌

[aguyinmontreal]

@Banandrew Just a hint, to debug on Samsung Internet, you can install it on non-Samsung devices:

https://www.androidauthority.com/samsung-internet-browser-android-793983/
https://play.google.com/store/apps/details?id=com.sec.android.app.sbrowser&hl=en

or preview the changes on Samsung Developers
http://developer.samsung.com/remotetestlab/rtlDeviceList.action#

[stale[bot]]

There has been no activity in this thread for 90 days. While we care about every issue and we’d love to see this fixed, the core team’s time is limited so we have to focus our attention on the issues that are most pressing. Therefore, we will likely not be able to get to this one.

However, PRs for this issue will of course be accepted and welcome!

If there is no more activity in the next 90 days, this issue will be closed automatically for housekeeping. To prevent this, simply leave a reply here. Thanks!