Menu icon Foundation
Windows Phone 8 <select> not working caused by Foundation 5 JavaScript library?

Hi all,

We've created an web application that should support mobile, tablets and desktops.
So far everything works just fine, but we have found 1 issue regarding Windows Phone 8.1 (WP8).
Somehow when the Foundation JavaScript files are included, the select (option dropdowns) of forms don't seem to work anymore. They work perfectly fine on all other devices and OS's, but WP8 doesn't like it.

Has anyone encountered something like this as well, and maybe could provide me with an answer how to fix this?

If I excluded the whole Foundation JavaScript library, the works perfect. Also tried to exclude parts of the JavaScript files, but didn't help.

I coudn't find anything around the forum nor Google to help me with this issue.
Hope to hear something.

Regards,
Robbert

WP8Windows Phone 8selectnot working

Hi all,

We've created an web application that should support mobile, tablets and desktops.
So far everything works just fine, but we have found 1 issue regarding Windows Phone 8.1 (WP8).
Somehow when the Foundation JavaScript files are included, the select (option dropdowns) of forms don't seem to work anymore. They work perfectly fine on all other devices and OS's, but WP8 doesn't like it.

Has anyone encountered something like this as well, and maybe could provide me with an answer how to fix this?

If I excluded the whole Foundation JavaScript library, the works perfect. Also tried to exclude parts of the JavaScript files, but didn't help.

I coudn't find anything around the forum nor Google to help me with this issue.
Hope to hear something.

Regards,
Robbert

Martin Kearn almost 5 years ago

Hi, did you get any reply/resolution to this?

I'm having the same problem with Windows Phone 8.1. My Select element (dropdown) works everywhere apart from IE11 in Windows Phone 8.1. On Windows Phone it simply does nothing when clicked.

I have also proven that it is something to do with Foundation because if i put a plain old HTML page on the same site, it works fine on the same phone.

This is my foundation page: http://babblekids.co.uk/newhome (Foundation v5.4.7)

This is my non-foundation page: http://babblekids.co.uk/plainhtmlpage

I have also found that if i set the phone's browser 'website preference' to 'desktop version', the Select works as expected, but if i set it to 'mobile version' it does not work.

I'm getting the exact same behavior when using dropdowns on the Foundation Docs site via my phone. There is one on this page which exhibits the same behavior as my website, which further reinforces that this is a foundation compatibility issue rather than an implementation issue: http://foundation.zurb.com/docs/components/forms.html

Michael Fouquette over 4 years ago

Arg! No solution yet?

Rafi Benkual over 4 years ago

We test the form select on each release on a real Windows 8 phone. Just tried again and no issues. Can't get to Martins page anymore but would like to see an example to help more.

David O over 4 years ago

I'm encountering this problem too on my application, which is now on foundation 5.5.2 using a windows phone

However I can't replicate it on the foundation docs site, so it must be something to do with the implementation. Did you get anywhere on this Martin or Michael?

The form's i'm using have abide applied to them, but again this isn't a problem on the foundation docs site.

David O over 4 years ago

Aha, it looks like it could be related to the fastclick library dependency foundation has:

https://github.com/ftlabs/fastclick/issues/304

Updating fastclick to 1.0.6 via bower has fixed it for me, you can see this was identified and patched in 1.0.5 (https://github.com/ftlabs/fastclick/releases/tag/v1.0.5)

Hope this helps,

David

Rafi Benkual over 4 years ago

That does help! Thanks for sharing your solution!

Michael Fouquette over 4 years ago

THANK YOU, @David O! Fixed.

Cole Beck over 4 years ago

Wow, I had no idea what was causing this in my Foundation webapps, definitely going to try this out! Thanks!