Semantic-ui: Dropdown doesn't work in Mobile Phones

[ajeets1978]

I was just browsing through recently one of my site with semantic ui framework and realized that Dropdown doesn't work with Mobile phone, it doesn't drops the list.

I tried then the Semantic-UI site as well, same is the case with it, it doesn't drops down the list in drop down in Mobile phone.

[jlukic]

This doesn't appear to be the case. Device/platform?

[ajeets1978]

Samsung S6 / LOLLIPOP

[ajeets1978]

I think its not working with the default browser in S6/Lollipop. Its working with chrome just checked.

[andre-developer]

I can confirm that on Samsung S6 (Android 5.1.1) native browser the dropdown is not working.
Also on Samsung Alpha (Android 5.0.2) the native browser after tapping on a dropdown it is opening but immediately closing, only if you tap and keep a finger a bit longer it will open correctly.

On Samsung s6, inAnimation (see below) will have always value ‘none’. It's not picking up the correct value after applying the class name. Apparently there’s some issue with the Css DOM immediate update, but I managed to force the refresh buy adding .hide().show() as a hack.

(transition.js, line 693)
inAnimation = $clone
    .addClass(className.inward)
    .hide()
    .show()
    .css('animationName')
;

on Samsung Alpha /and also s6 after applying the first hack/, an immediately closing dropdown, I fixed by adding setTimeout:

(dropdown.js, line 396)
toggle: function() {
          module.verbose('Toggling menu visibility');
          if( !module.is.active() ) {
            setTimeout(function() {
                module.show();
            }, 0);
          }
          else {
            module.hide();
          }
 },

I hope it will help you to fix it at least temporarily.

[jlukic]

I think the only chance I have at fixing this is if someone can donate a cheap android phone for testing

[jlukic]

Just tested this on donated Android phone. Seems to be working fine in Android 4.4.4.

Going to do a software upgrade and see if this is occurring on Lollipop 5.x

[jlukic]

Agh it looks like the Galaxy S4 that was donated does not yet support Lollipop Android 5.x.

There might be some way to test if I can figure out how to root it and install firmware manually, but means more delays..

[ajeets1978]

Why not use android SDK and you can test with emulator with any platform on that.

[jlukic]

I think that might be the next step

[Elephant-Vessel]

This is now working for me in Android 6.0.1 stock browser. I can not confirm with android 4.1.2 since the semantic-ui page can not load properly, it's mostly just black.

[Doyoo]

a temporary solution: $(".ui.dropdown").dropdown({transition: 'fade down' });

[lezlea]

I'd like to add that I've had this issue for a few months with a Samsung Galaxy S6 in stock browser, Andriod v.7. Meteor Semantic UI 2.2.6.
I've tried multiple solutions, including everything in this thread and nothing worked except for @andre-developer updates to transition.js and dropdown.js
So thanks Andre and I'm happy to test any updates in future if you still don't have a similar phone to test with.

[JayDing]

I just tested Samsung S6 edge native browser with:
$(".ui.dropdown").dropdown({transition: 'none'});
and it works.
maybe some transition event could not work.

[adamgravita]

@jlukic It seems as though @andre-developer fix did the trick. Can we get this put into the latest?

[moxet]

@JayDing Yes your solution works fine but the issue is text box is not showing anything after selecting values.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 30 days if no further activity occurs. Thank you for your contributions.