Search code examples
materialize

Chips with autocomplete (no jQuery and 1.0.0-alpha3) does not initialize

Expected Behavior

Create the Chips component with the autocomplete option using Javascript (no jQuery).

Current Behavior

Running the component I get the message

materialize.min.js:6 Uncaught TypeError: Cannot read property '0' of null
at n.value (https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-alpha.3/js/materialize.min.js:6:104488)
    at new n (https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-alpha.3/js/materialize.min.js:6:101364)
    at Function.value (https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-alpha.3/js/materialize.min.js:6:11799)
    at Function.value (https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-alpha.3/js/materialize.min.js:6:106244)

Steps to Reproduce

Codepen link: Using 1.0.0-alpha3

HTML:

<div class="row">
  <div class="col s12 m6">
    Groups:                            
    <div class="chips chips-autocomplete-groups">     </div>
  </div>                       
</div>

JS:

var elem = document.querySelector('.chips-autocomplete-groups');
if (elem != null) {
    var insChipAC = M.Chips.init(elem, {
        placeholder: 'Enter a group',
        secondaryPlaceholder: '+Group',
        autocompleteOptions: {
            data: {
                'Alex': null,
                'Brandy': null,
                'Charlie': null
            },
            limit: Infinity,
            minLength: 1
        }        
    });    
}

In 1.0.0-alpha2 version I was able to create the component Codepen link: Using 1.0.0-alpha2

Environment

  • Version used: 1.0.0-alpha3
  • Browser Name and version: Chrome 63.0.3239.108
  • Operating System and version (desktop or mobile): Ubuntu 16.04
Solution

  • It's a bug. Fixed in https://github.com/Dogfalo/materialize/pull/5514 (link do pull request)