Turbolinks in Rails 5 Break Bootstrap Select Dropdowns

Question

I have a Rails 5 app running on Heroku using Bootstrap 3.

I have this form:

.panel-body
  .form-group.has-feedback
    .text-muted
      = f.label :kind, 'Swim, Bike or Run?'
     = f.select :kind, Workout.kinds.keys.to_a.map { |s| [s.humanize, s] }, {}, class: 'select'

Problem: Without Turbolinks it renders a nice 'Select' form. With Turbolinks it renders a normal browser dropdown. I would like to render the nice 'Select' class form. I could disable Turbolinks, but I need it elsewhere in the app.

I need Turbolinks enabled because I'm injecting data into the form from a .coffee file.

View:

.panel-footer.panel-footer-condensed
  .heading-elements
    span.heading-text
      strong
        a(
          data-type="useTemplate"
          data-kind=template.kind
          data-distance=template.distance
          data-duration=template.duration
          data-notes=template.notes
         )
         | Use Template

Coffee file:

$(document).on 'turbolinks:load', ->
  $('a[data-type="useTemplate"]').click (e) ->
    $('#workout_kind').val(e.target.dataset.kind)
    $('#workout_distance').val(e.target.dataset.distance)
    $('#workout_duration').val(e.target.dataset.duration)
    $('#workout_notes').val(e.target.dataset.notes)

Question: How can I get my dropdown to keep the styling of the 'Select' class?

If there is another easier solution, I'm also eager to hear. I have tried using .on 'page:load' and .on 'document:load' but it does not inject the values into the form.

Thanks

Answer 1

Turbolinks was messing with a whole bunch of things in the app so I decided to simple remove Turbolinks and change my coffee file to this instead:

$ ->
  $('a[data-type="useTemplate"]').click (e) ->
    $('#workout_kind').val(e.target.dataset.kind)
    $('#workout_distance').val(e.target.dataset.distance)
    $('#workout_duration').val(e.target.dataset.duration)
    $('#workout_notes').val(e.target.dataset.notes)