Multiple dots selected if mixing slide and touch (click)

short description of the bug / issue, provide more detail below.

The problem could be reproduced on the demo page http://kenwheeler.github.io/slick/ with any touch device. E.g. on “single item”

====================================================================

[ paste your jsfiddle link here ]

not needed - error on demo page reproducible: http://kenwheeler.github.io/slick/

====================================================================

Steps to reproduce the problem

1. surf to http://kenwheeler.github.io/slick/ on any touch device
2. click (touch) the 3rd dot on “single item” slider -> “3” is displayed and 3rd dot is marked
3. slide back (using slide gesture) to “2”

====================================================================

What is the expected behaviour?

only the 2nd dot should be marked after sliding to “2”

====================================================================

What is observed behaviour?

“2” is displayed but 2nd and 3rd dot are marked

====================================================================

More Details

• reproducible on any touch device

[efigarolam]

@mattcdowning this issue is related with focus handling. Looks like focus is not removed on swipe. I manage to get a CSS fix for this issue:

    .slick-dots li button:focus:before {
        opacity: 0.25;
    }
    
    .slick-dots li.slick-active button:focus:before {
        opacity: .75;
        color: #000;
    }

Not sure why they add style based on focus when the .slick-active should handle the styling for an active dot.

[GitFlip]

@bracketslash Sorry haven’t looked into this anymore since @efigarolam’s fix worked for us.