Slick: Multiple dots selected if mixing slide and touch (click)

[dermoritz]

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

[qharryq]

+1

[mattcdowning]

@dermoritz @qharryq Either of you find a solution for this issue?

[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]

Seems like this issue is reproducible without a mobile device even. All you have to do is click on a dot and then another dot before the animation completes. When the animation completes both dots will be focused.

This can be done on the demo page.

Edit: The temporary solution by @efigarolam also fixes this.

[alexleeelkins]

The temporary solution by @efigarolam does not fix this issue for me. Are there any other known fixes? @dermoritz @qharryq @GitFlip

[GitFlip]

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