Select not working on Windows Phone with Ionic

ionic-v1
1

I have a Cordova app based off the new tabs template I found at this link
https://visualstudiogallery.msdn.microsoft.com/4e44ba8b-a4c8-4106-b70e-00d63241a54a

The basic HTML select fields, the drop downs, are not working on Windows Phone (10) only, both the physical device and the emulator. But they work in Ripple, and local machine Windows 10. Basically, they don’t drop down or select, just highlights. Here are some screenshots of the basic load and then me clicking on the dropdown.

image
image

I’ve even removed all logic on them and replaced with basic HTML select with the same results
`

Moose Bear Wolf Elk `

Any ideas on what the issue is?

2

l am facing identical issue! I even put a static dropdown just like you did and I get same behavior on Windows 10 mobile (Lumia 1520). All this started after I upgraded TACO to v6. I am not a JavaScript expert by any standard and pardon my ignorance. Somewhere in the up chain of ionic bundle behavior of select element is hijacked. Click event is fired and I attempted to debug in ionic bundle but I was lost- honestly! Interestingly same dropdowns open correctly on Windows 10 desktop and Android/IOS ripple. Same dropdowns worked perfectly on the windows phone prior to taco v6. I would be interested if you manage to solve this.

Here is my working app prior to taco update- https://www.microsoft.com/store/apps/9NBLGGH5WHDQ

3

Try: <div data-tap-disabled="true">[your select]</div>

so

  <div data-tap-disabled="true">
                    <select> 
                        <option value="one">One</option>
                        <option value="two">Two</option>
                    </select>
</div>

This works for me. In my research I found that this is actually an old issue related to how Ionic handles browser delay and the platform running. I’ve seen a lot of fixes and some are very complicated but this looks like the best way now straight from Ionic.

http://ionicframework.com/docs/api/page/tap/

1 Like
4

anolan13- Many thanks for the feedback. I did try adding data-tap-disabled to true in div tag but it did not open the dropdown. My scenario may be different than yours. There are so may events at the body element (attached by ionic). I was able to open the dd after skipping some codes but I was lost in millions of lines!!

Appreciate your feedback.

5

Solved the problem. I had to remove ionic framework completely. Started a blank Cordova project, added angularjs and jquery manually. This way I was completely out of ionic.

Process of elimination:
Uninstalled Cordova and reinstall it- no success as long as ionic is present at the project.
Started a blank cordova project with static select/dropdown and it works fine.
Added angularjs and jquery. Dropdown opens just fine and life is easy!

I had to update content security policy to enable CORS.This was needed since I was calling WebAPI to get the data.

Am I going back to ionic framework? Not anything soon. Simpler is better! May be later if/when I have more command over java scripts. :slightly_smiling:

6

Good for you!. Ionic is full of bugs.