Browser jumping to slider on afterChange, unwanted focus event when using slickGoTo

[walt-er]

I have some buttons unaffiliated with my slick slider that activate the slider using slickGoTo. Once the slider has animated to that slide -- right when the "afterChange" event fires -- the browser scrolls to the top of the slider. Some testing has shown that the slides are focused when moved to programmatically.

I can't find a way to prevent this focus from occurring. I've tried messing with the slides' tabindex attr but slick seems to reset that attr when animating to a slide. I need to avoid focus as it jumps uncomfortably when the slider is only partially on screen.

I also am unable to modify slick's own files to make a fix; I need to fix this in my own code. I am using the slick NPM module and I'm seeing the problem on Chrome and Safari with macOS Sierra.

It seems to be exactly what was described in this now-closed ticket: https://github.com/kenwheeler/slick/issues/1662

And here's a gif from that thread demonstrating the issue, albeit using slick arrows and not slickGoTo: https://i.gyazo.com/12167ed07ed2b1f45338059dbcb5ba0c.gif

Thanks in advance!

[walt-er]

Having poked around the source a bit, it seems to me that a couple lines should check for the focusOnSelect and focusOnChange options before triggering focus:

https://github.com/kenwheeler/slick/blob/8ccd846dd2f63963ed4388c1963c77dc2869c482/slick/slick.js#L723 https://github.com/kenwheeler/slick/blob/8ccd846dd2f63963ed4388c1963c77dc2869c482/slick/slick.js#L1703

Also, for anyone else experiencing this issue, I figured out that turning off the accessibility option is a temporary workaround for this bug (although this also disables tabbing and arrow keys).

[francescostella]

@walt-er I just updated slickjs to 1.7.1 and noticed the same issue. The focus on the first slide fires off on first initialization & on 'afterChange'.

In my case even if I set:

focusOnSelect: false,
focusOnChange: false,
accessibility: false,

one-by-one or all them together set to false, it does NOT seem change anything.

[brian-gonzalez]

Also experiencing this issue. Clicking an arrow/button sets the focus on the active slick-slide, which in turn blurs the arrow and the page jumps.

[nandotess]

Also experiencing this issue. Clicking an arrow/button makes the page jumps.

[alexpivtorak]

Same issue

[gabrielpaivadev]

accessibility: false

work for me, v1.7.1

[nandotess]

Yes, with accessibility: false everything is working. Also, issues with browser resize (when the arrows are styled in a different position) are resolved.

[brian-gonzalez]

@gpgabrielpaiva @nandotess Yes, but that option also disables arrow navigation, proper focusing, etc. Setting it to false is a workaround, not a fix.

Version 1.8.0 is out and fixes the issue with the new focusOnChange option.

[walt-er]

@brian-gonzalez That's great to hear! I would test it but it looks like the npm package is still 1.7.1?

[brian-gonzalez]

@walt-er Yeah, I wonder why that is. Hopefully it'll be updated this week? Wonder if we can get the dev's attention.

[walt-er]

@kenwheeler 👋 Any chance of updating the npm package? We'll be forever grateful!

[kenwheeler]

Yup let me check with greggo on the status On Mon, Sep 18, 2017 at 4:00 PM Walter Mitchell [email protected] wrote:

@kenwheeler https://github.com/kenwheeler 👋 Any chance of updating the npm package? We'll be forever grateful!

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/kenwheeler/slick/issues/3046#issuecomment-330339090, or mute the thread https://github.com/notifications/unsubscribe-auth/AARfmFfmLomr7TU8Sw4O70fvGYFkP1Xuks5sjsv5gaJpZM4Oz6rm .