Additional browser_is_supported checks for uncaught mobile devices

[ryanjstout]

We had reports of certain mobile users unable to interact with Chosen dropdowns (which we thought shouldn't fire for mobile at all). However, we found that not all mobile devices are caught in the mobile device check.

browser_is_supported check in abstract-chosen.coffee file (starts at line 375) doesn't include all potential mobile devices window.navigator.userAgent possibilities. We found one mod and adding two additional checks solved for our situation in real device testing (noted at end), but there are likely others?

Reproduce:

1. iPad Version 7.1.2 (11D257): window.navigator.userAgent is "Mozilla/5.0 (iPad; CPU OS 7_1_2 like Mac OS X) AppleWebKit/537.51.2 (KHTML, like Gecko) Version/7.0 Mobile/11D257 Safari/9537.53"
2. LG Tab VK810 4G: window.navigator.userAgent is "Mozilla/5.0 (Linux; Android 4.4.2; VK810 4G Build/KOT49I.VK81023A) AppleWebKit/537.36 (KTML, like Gecko) Chrome/34.0.1847.114 Safari/537.36"
   • Both above are uncaught by current browser_is_supported check.
   • Note that Chrome's dev tools mobile simulator is properly caught by current Chosen logic so can't be used to test.

Chosen Version:

• Chosen v1.6.2

Fix/Resolution We found two additional lines that solved our device tests. However, I'm sure there are more... and potential for laptops with built-in wifi/cell (like 4G LTE card) to be flagged as mobile. We were unable to test this.

browser_is_supported check in abstract-chosen.coffee (line 372) can be updated to:

@browser_is_supported: ->
    if "Microsoft Internet Explorer" is window.navigator.appName
      return document.documentMode >= 8
    if /iP(od|hone|ad)/i.test(window.navigator.userAgent) or # Adds iPad check
       /IEMobile/i.test(window.navigator.userAgent) or
       /Windows Phone/i.test(window.navigator.userAgent) or
       /BlackBerry/i.test(window.navigator.userAgent) or
       /BB10/i.test(window.navigator.userAgent) or
       /Android.*Mobile/i.test(window.navigator.userAgent) or
       /Mobile/i.test(window.navigator.userAgent) or # Catches iPad, likely others
       /4G/i.test(window.navigator.userAgent) # Catches LG tablet
      return false
    return true

Final thoughts

• Are there any other known checks that should be added?
• I'm happy to get a PR submitted, just might take a couple of weeks for me to get to it.
• Assistance by @jacobpaine

[Zardoz89]

Any notice about this ? We found the same issue and it's very easy to reproduce with Firefox and Chrome dev tools on any desktop computer.

[Zardoz89]

Self-reply . This is intentional as on Android and iPhone/iPad uses native controls for the UI but keeps working the whole JavaScript API over Choosen.js