Flickity - select method with a select element: Chrome issue

metafizzy / flickity

:leaves: Touch, responsive, flickable carousels

https://flickity.metafizzy.co

7.52k stars 605 forks source link

Flickity - select method with a select element: Chrome issue #949

Closed guithib closed 5 years ago

guithib commented 5 years ago

Hi @desandro and Flickity community,

I encountered a curious behavior on Chrome browser (Version 74.0.3729.169). I attempted to replace buttons on official Flickity - select method demo with some option nested in a select element.

Test case: https://codepen.io/guyom/pen/vwPEqe?editors=1011

The select element correctly synchronize carousel on Firefox & Edge, but nothing happens on Chrome.

Thanks for your help.

-- Disclosure: Please be kind, I am a hobbyist developper 🙈

desandro commented 5 years ago

Thanks for reporting this bug. If you're listening for changes to a select element, then you want to use the change event. Its interesting that this browser bug differs in Firefox vs Chrome. Nice find!

$('#platform').on( 'change', function() {
  var index = $(this).val();
  console.log(index);
  $carousel.flickity( 'select', index );
});

guithib commented 5 years ago

Great! Thank you very much for your positive reply. I have just add a link to your answer on the codepen demo.

P.S: congrats for Zdog 🚀