Ruby on Rails - Why is Materialize.updateTextFields not a function?

Question

I have a Ruby on Rails project that uses the material-saas gem. I recently noticed that text field animations have stopped working. More specifically, when a text field is active, the label does not move up on the page and whatever the user types in the input field writes over the label text and looks awful. Here (https://github.com/Dogfalo/materialize/issues/682) is an example of the style issue I'm encountering. In addition to the label text not moving correctly, the form also has a file field that is not working. When a user selects a file to upload, the file name does not appear in the form, which is the intended behavior.

I recently ran rake assets:clobber and rake assets:precompile and I wonder if that has something to do with this issue.

I did some research and in the Material CSS docs they say:

You can also call the function Materialize.updateTextFields(); to reinitialize all the Materialize labels on the page if you are dynamically adding inputs.

I attempted this fix, but I get Uncaught TypeError: Materialize.updateTextFields is not a function in my console when I load the page.

Here is my form view:

<%= render 'shared/header' %>
<div class="container">
<h3>New Photo of the Day</h3>
<div class="row">
<%= form_for @photo, multiple: true do |f| %>

  <div class="input-field">
    <%= f.label :title %>
    <%= f.text_field :title %>
  </div>

  <div class="input-field">
    <%= f.label :caption %>
    <%= f.text_area :caption, class: "materialize-textarea" %>
  </div>

  <%= f.label :date %>
  <%= f.date_field :date, class: "datepicker"%>

  <div class="file-field input-field">
    <div class="btn waves-effect waves-light yellow accent-4 white-text">
      <span>File</span>
      <%= f.file_field :image %>
    </div>
    <div class="file-path-wrapper">
      <input class="file-path validate" type="text">
    </div>
  </div>

  <div class="input-field center-align">
    <%= f.submit "Upload", class: "btn-large waves-effect waves-light"  %>
  </div>

<% end %>

Here is my assets/application.js

//= require jquery
//= require materialize-sprockets
//= require jquery_ujs
//= require react
//= require react_ujs
//= require components
//= require_tree .

Here is my assets/custom.js

$(document).ready(function() {
  Materialize.updateTextFields();
});

This is all really strange because I know the form style animations were working. I did not change the code for my form. The only thing I can think of is the clobber / precompile command, which I needed to run to get some ui improvements up onto production.

Thanks for taking the time to look this one over and I appreciate the assistance!

Answer 1

Looks like a few issues to me:

Rails is magic, and it does something called "turbolinks." Basically, pages are dynamically replaced instead of actually changing pages. It makes your site faster, but doesn't always issue the same Javascript events.

You'll also need JQuery 2 (I've updated my answer after advice from Dmitry).

Change the first few lines of your application JS to:

//= require jquery2
//= require turbolinks
//= require materialize-sprockets

Secondly, I found a second bug that exists in the materialize library. Basically, it wouldn't define updateTextFields() until turbo links loaded a page. To fix this, I've submitted a PR, but in the meantime, I would money-patch this by copy/pasting the method from the source to your code (inside $(document).ready). Use something like this to let your code get updated once they fix the bug (pretty much a polyfill).

Materialize.updateTextFields = Materialize.updateTextFields || // code from forms.js

Answer 2

You are using jQuery 1.x.

Try using jQuery 2.x or 3.x.

Source: https://github.com/Dogfalo/materialize/issues/4593

E: The way to do this in your setup would be to change the line //= require jquery to //= require jquery2.