Language selector behaviour is buggy on different devices

[lastpotion]

🎩 User Story

I think Language selector behaviour it's a bit strange, It might be because the selector is an ul > a element.

On Desktop, as long the user hovers the ul > a and then click on a different language its fine, but if the user clicks on the language selector itself, the click event on the a takes precedence and refreshes the page with the current language.

As per mobile, on the browser (Chrome) emulating different smartphones/tablets seems showing but the user is not able to change the language. Also I tested the app on a couple of physical smartphones (Iphones 6 and OnePlus 3) and couldn't display the language dropdown on decidim-design.

📋 Related documentation

To reproduce the error on the current build of decidim-design, just change href on the the language links to something random like /es/e or /ca/c and then try to navigate.

http://decidim-design.herokuapp.com/

🎯 Acceptance criteria

Click or tap on the language selector should not redirect to the current language, only display the dropdown.

📌 Related issues

None

[josepjaume]

@htmlboy could you check this when you have some spare time? Thanks!

[htmlboy]

@josepjaume ok!

[htmlboy]

I'm not a big fan of this Foundation dropdown because it's quite dependant on markup and doesn't block the trigger's link loading (or it doesn't block a second click, not sure about that). Before considering rewriting it, would removing the href attribute on the trigger link (the selected language) solve the bug?

[josepjaume]

@lastpotion please chime in.

[lastpotion]

I checked all the respective CSS and HTML possible classes/tags as for example all the z-index, etc. Also I tried removing the href attribute on the trigger link, as @htmlboy suggest, but got the same result, it's not loading the respective locale.

I reproduced the issue at staging and design deployed apps and of course on localhost, sadly any of them worked or give me any hint about what is happening.

Although, I noticed testing on my smartphone that at the same time I tried to tap on the dropdown menu item, for a tiny fraction of time the element bellow where the dropdown was it's highlighted ( as if it was selected/clicked ).

I can't even guess where this tricky behaviour is coming, so can you try to reproduce it and share your thoughts?

[josepjaume]

@htmlboy it looks like we nailed down the issue to a Foundation bug specific on Chrome. Related to: #953 - maybe @mrcasals can give you more details.

[htmlboy]

@josepjaume do you mean it's not fixed in #143 ?

[mrcasals]

@htmlboy @josepjaume that PR fixes the bug for me (my bet is that @josepjaume didn't see the PR) :)

[josepjaume]

Oh my, I didn't see it, sorry! Good work!