Search code examples
jquerymaterializeapostrophe-cms

TypeError when using apostrophe with materialize

I've created an example repo to show some error I've encountered when loading materialize into apostrophes asset pipeline. This is the apostrophe-boilerplate as minimal example with materialize.css and .js in public asset folder.

I'm getting the following error when opening modal for Images, Files or Pages in admin interface Users or Global don't throw this error:

TypeError: this.dropdownEl is null materialize.js:2571:9
    _makeDropdownFocusable http://localhost:3000/modules/my-apostrophe-assets/js/materialize.js:2571
    Dropdown http://localhost:3000/modules/my-apostrophe-assets/js/materialize.js:2299
    init http://localhost:3000/modules/my-apostrophe-assets/js/materialize.js:1045
    init http://localhost:3000/modules/my-apostrophe-assets/js/materialize.js:2825
    _setupDropdown http://localhost:3000/modules/my-apostrophe-assets/js/materialize.js:6561
    Autocomplete http://localhost:3000/modules/my-apostrophe-assets/js/materialize.js:6478
    init http://localhost:3000/modules/my-apostrophe-assets/js/materialize.js:1049
    init http://localhost:3000/modules/my-apostrophe-assets/js/materialize.js:6878
    pluginName http://localhost:3000/modules/my-apostrophe-assets/js/materialize.js:1153
    selective jQuery
    enableTags http://localhost:3000/modules/apostrophe-schemas/js/user.js:515
    populate http://localhost:3000/modules/apostrophe-schemas/js/user.js:1160
    populate http://localhost:3000/modules/apostrophe-schemas/js/user.js:42
    _withoutIndex http://localhost:3000/modules/apostrophe-assets/js/vendor/async.js:181
    iterate http://localhost:3000/modules/apostrophe-assets/js/vendor/async.js:262
    iterate http://localhost:3000/modules/apostrophe-assets/js/vendor/async.js:274
    only_once http://localhost:3000/modules/apostrophe-assets/js/vendor/async.js:44
    partiallyApplied http://localhost:3000/modules/apostrophe-assets/js/vendor/setImmediate.js:27
    runIfPresent http://localhost:3000/modules/apostrophe-assets/js/vendor/setImmediate.js:46
    onGlobalMessage http://localhost:3000/modules/apostrophe-assets/js/vendor/setImmediate.js:92

I think this is caused by the following function in materialize.js:

/**
 * Initialize jQuery wrapper for plugin
 * @param {Class} plugin  javascript class
 * @param {string} pluginName  jQuery plugin name
 * @param {string} classRef  Class reference name
 */
M.initializeJqueryWrapper = function (plugin, pluginName, classRef) {
  jQuery.fn[pluginName] = function (methodOrOptions) {
    // Call plugin method if valid method name is passed in
    if (plugin.prototype[methodOrOptions]) {
      var params = Array.prototype.slice.call(arguments, 1);

      // Getter methods
      if (methodOrOptions.slice(0, 3) === 'get') {
        var instance = this.first()[0][classRef];
        return instance[methodOrOptions].apply(instance, params);
      }

      // Void methods
      return this.each(function () {
        var instance = this[classRef];
        instance[methodOrOptions].apply(instance, params);
      });

      // Initialize plugin if options or no argument is passed in
    } else if (typeof methodOrOptions === 'object' || !methodOrOptions) {
      plugin.init(this, arguments[0]);
      return this;
    }

    // Return error if an unrecognized  method name is passed in
    jQuery.error("Method " + methodOrOptions + " does not exist on jQuery." + pluginName);
  };
};

I would be really glad I've somebody can take a look how this error is solvable. THX

Solution

  • I found the easiest solution in add materialize as components to apostrophe asset pipeline in lib/modules/apostrophe-assets/index.js. This saves even lot of unnecessary files if you don't use all components.

       ...
    {
      name: 'vendor/materialize/cash'
    },
    {
      name: 'vendor/materialize/component'
    },
    {
      name: 'vendor/materialize/global'
    },
   ...