[Slider] event.changedTouches undefined with old versions of jQuery

[jeremylind]

Expected Behavior

Slider is draggable on mobile devices using touch

Current Behavior

Slider is not draggable on mobile devices using touch when using older versions of jQuery.

Browser console reports: "Uncaught TypeError: Cannot read property '0' of undefined" on foundation.util.touch.js:133

event.changeTouches does not exist.

Possible Solution

Add a check to see if changedTouches exists on event object. If not, use event.originalEvent.changedTouches

It looks like older versions of jQuery do not clone changedTouches from the original event to the jQuery event.

Test Case and/or Steps to Reproduce (for bugs)

Test Case: https://codepen.io/viewpoint/pen/YbRwwE

How to reproduce:

1. Set up a Slider component using Foundation 6.5.3
2. Replace jQuery with an old version like 1.12.4
3. Load the slider in a touch enabled context.

Context

Using Foundation as part of another framework, such as WordPress, means Foundation might not get to decide what version of jQuery is loaded. Projects like WordPress use old versions of jQuery for backward compatibility.

Other reports

• https://foundation.zurb.com/forum/posts/58964-foundation-slider-not-working-on-mobile
• https://stackoverflow.com/questions/55530425/var-is-undefined-in-foundation-util-touch-js

Your Environment

• Foundation version(s) used: 6.5.3
• Browser(s) name and version(s): Chrome
• Device, Operating System and version: Mac, emulating Google Pixel, or another touch-enabled device.

Checklist

• I have read and follow the CONTRIBUTING.md document.
• This is a bug report or a feature request.
• There are no other issues similar to this one.
• The issue title and template are correctly filled.

[DanielRuf]

Hi @jeremylind,

thanks for reporting this.
The following might be related: #11716

Can you test the proposed change?

[DanielRuf]

2. Replace jQuery with an old version like 1.12.4

This is not recommended in general. Please try to use jQuery 2 or 3.

[DanielRuf]

https://codepen.io/DanielRuf/pen/yWQexO works for me on my smartphone.

[DanielRuf]

Both work for me on my smartphone so I can not reproduce it so far.

[jeremylind]

Thanks for looking in to this @DanielRuf. I tried applying the patch from #11716 and it didn't make a difference.

https://codepen.io/DanielRuf/pen/yWQexO and https://codepen.io/viewpoint/pen/YbRwwE do not work on my smartphone (Google Chrome on Andriod).

Old versions of jQuery still come bundled with some apps like WordPress, so Foundation doesn't always get to dictate which version of jQuery will be used.

[DanielRuf]

Well, in most cases you can still use jQuery.noConflict().

So far can not reproduce this on my Android smartphone in Chrome. So I have to do more tests.

[DanielRuf]

Closing as not reproducible.