It does not work with the latest version of materialize

[fabryss]

It does not work with the latest version of materialize 1.0.0-rc.1
Does anyone know a solution?
Thanks so much

ERROR MESSAGE:

Uncaught TypeError: Cannot set property 'tabIndex' of null
at s.value (materialize.min.js?ver=4.9.5:6)
at new s (materialize.min.js?ver=4.9.5:6)
at Function.value (materialize.min.js?ver=4.9.5:6)
at Function.value (materialize.min.js?ver=4.9.5:6)
at r.fn.init.jQuery.fn.(/orariautobus/anonymous function) [as dropdown] (https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.min.js?ver=4.9.5:6:12862)
at r.fn.init.$.fn.materialize_autocomplete (jquery.materialize-autocomplete.min.js?ver=4.9.5:1)
at HTMLDocument. (scripts.js?ver=4.9.5:50)
at j (jquery-3.2.1.min.js?ver=4.9.5:2)
at k (jquery-3.2.1.min.js?ver=4.9.5:2)

[AkshayChordiya]

I'm facing the same issue

[yuvalherziger]

+1
I'd try to contribute to solving this when I'll find time, thanks for this plugin 😉

[AkshayChordiya]

I tried from my side to fix, couldn't do it (Not expert in CSS-JS stuff). This library is amazing and really needs to update to the new version of Materializecss.

[viclotana]

same issue here

[b00leant]

same issue here

[Sander0542]

Is this fixed?

[AdamTyler]

I'm seeing this issue still

[avidus3r]

Came across this looking for answers. Wasn't able to find much so I dug into it a little further and noticed that it appends the ul dropdown to the first parent element of .input-field. In my case I didn't have that element.

After I added that class, all good. My html below:

<div class="col s4 center search input-field"> <!-- added .input-field -->
    <input class="autocomplete" type="text" id="autocomplete-input" placeholder="Search" />
</div>

[aniplaylist]

@avidus3r I don't think you are using Materialize in its latest version (yours is probably < 1.0.0)

The issue is linked to all the changes done to the Dropdown component : https://github.com/Dogfalo/materialize/blob/v1-dev/v1-upgrade-guide.md#dropdown

I took Materialize Autocomplete's demo and tried to fix the issue by replacing Materialize's CDN to 1.0.0 instead of 0.9.7, and applied changes listed in the changelog. You can find the result here : https://codepen.io/WillyReyno/pen/wYBaeP

You'll notice that the error is not displayed anymore, however the dropdown list is not triggered without clicking on the label... I don't understand why.

Any ideas?

@icefox0801 do you plan to upgrade this package to be compatible with Materialize 1.0.0 ?

[rubendinho]

I am also experiencing this problem with Materialize 1.0.0.

[luisolf]

I was able to make the multiple autocomplete working on Materialize 1.0.0 by changing the main autocomplete js and adding some local jquery. Thanks to @AngyNoT to point out the start path.

It's certainly not the best solution and I didn't have the time to test it, use at your own risk.

Steps to make it work:

1. Download the changed "jquery.materialize-autocomplete.js" from the link below. I forked it on my account and changed just this file, the others remain exactly equal to @icefox0801 version, if you decide to use it on your project, you will have to minify the file by yourself as the minified file on my fork is unchanged. Basically what was changed inside the "jquery.materialize-autocomplete.js" was the Materialize DropDown object method "_getDropDownPosition", and also the dropdown initialization.

https://github.com/luisolf/materialize-autocomplete

2)Change the data-trigger attribute to data-target on your input element.

3)Call the function below on your ajax success function, inside the getData autocomplete method, after the callback call, and also on the input event of your input element.

var updateDropdown = function (id_ele) { var elem = document.getElementById(id_ele); var instance = M.Dropdown.getInstance(elem); if(instance) { if(!instance.isOpen) instance.open(); instance.recalculateDimensions(); } }

[nosahama]

Hey guys, I am also experiencing this problem with Materialize v1.0.0. I am using it with Django and crispy forms, for some weird reason I get an error when i follow the base sample on the materialize website Autocomplete, this is even before i insert my own data and it is so discouraging.

Any clear thoughts so far on a possible solution to this issue?

[luisolf]

Hey guys, I am also experiencing this problem with Materialize v1.0.0. I am using it with Django and crispy forms, for some weird reason I get an error when i follow the base sample on the materialize website Autocomplete, this is even before i insert my own data and it is so discouraging.

Any clear thoughts so far on a possible solution to this issue?

Just follow the steps I posted above to make it work on Materialize 1.0.0.

[nosahama]

Hey guys, I am also experiencing this problem with Materialize v1.0.0. I am using it with Django and crispy forms, for some weird reason I get an error when i follow the base sample on the materialize website Autocomplete, this is even before i insert my own data and it is so discouraging.
Any clear thoughts so far on a possible solution to this issue?

Just follow the steps I posted above to make it work on Materialize 1.0.0.

Haha, you clearly say Use at your own risk lol, but i would give it a try. Thanks a lot.

[luisolf]

Hey guys, I am also experiencing this problem with Materialize v1.0.0. I am using it with Django and crispy forms, for some weird reason I get an error when i follow the base sample on the materialize website Autocomplete, this is even before i insert my own data and it is so discouraging.
Any clear thoughts so far on a possible solution to this issue?

Just follow the steps I posted above to make it work on Materialize 1.0.0.

Haha, you clearly say Use at your own risk lol, but i would give it a try. Thanks a lot.

Just test it like you normally do with other stuff and see it fits your needs, So far I think it is working decently.

[tayhimself]

Just wanted to quickly add that this is caused by the missing input-field class as pointed out @avidus3r earlier this thread. @nosahama, this is indeed what @luisolf modification does. I would rather update my code to always have input-field class rather than add extra stuff on top.

[luisolf]

Just wanted to quickly add that this is caused by the missing input-field class as pointed out @avidus3r earlier this thread. @nosahama, this is indeed what @luisolf modification does. I would rather update my code to always have input-field class rather than add extra stuff on top.

All my previous autocomplete inputs in old Materialize already had input-field class on parent element, are you sure you are using Materialize 1.0.0?

[nosahama]

Just wanted to quickly add that this is caused by the missing input-field class as pointed out @avidus3r earlier this thread. @nosahama, this is indeed what @luisolf modification does. I would rather update my code to always have input-field class rather than add extra stuff on top.

What version of Materialize are you using?

[luisolf]

@icefox0801's Materialize Autocomplete is not the same as Materialize Autocomplete. @tayhimself

[drewrwilson]

Any update? Having this same issue

[pistell]

This is still persisting

[devrafalko]

I encountered the same problem with the select element and M.FormSelect.init() but eventually I have figured out that my SELECT element must be appended to the DOM before I call M.FormSelect.init(), then this error is not thrown.

[anshulkatta]

Only solution as of now

Solution is to add input field class div always in autocomplete to remove this error ...even in the latest version

<div class="input-field">
		<input type="text" id="autocomplete-input" placeholder="Search..." onchange="performSearch();"
			class="autocomplete search_term red-text"
			style="border-radius: 25px; padding: 10px; border: 2px solid crimson;">
</div>

Make sure your input type text is inside input-field div

[luisolf]

People still making a lot of confusion. This git issue is for Icefox's Autocomplete, not Materialize's default Autocomplete, the input-field thing is for the standard materialize autocomplete.

Icefox's one stopped working on Materialize 1.0, due to the changes in dropdown object, but it is still better, has multiple item selection support, and those willing to make it work I point the way above, just follow the instructions I wrote.

[sajadghobadi]

use id selector instead class selector. for example call dropdown like this :
html:

<a class='dropdown-trigger' id="dropdowner" href='#' data-target='dropdown1'>Drop Me!</a> <ul id='dropdown1' class='dropdown-content'> <li><a href="#!">one</a></li> <li><a href="#!">two</a></li> <li class="divider" tabindex="-1"></li> <li><a href="#!">three</a></li> <li><a href="#!"><i class="material-icons">view_module</i>four</a></li> <li><a href="#!"><i class="material-icons">cloud</i>five</a></li> </ul>

js :
$('#dropdowner').dropdown();

[Lagicrus]

Came across this looking for answers. Wasn't able to find much so I dug into it a little further and noticed that it appends the ul dropdown to the first parent element of .input-field. In my case I didn't have that element.

After I added that class, all good. My html below:

<div class="col s4 center search input-field"> <!-- added .input-field -->
    <input class="autocomplete" type="text" id="autocomplete-input" placeholder="Search" />
</div>

Thanks for the fix man :D

[SmythyCosta]

@avidus3r , Thank you, you saved my life.

[lozfroston]

@avidus3r gave me the solution to this problem too, adding the class to the parent element of the input.

Thank you !!!

[TorvaldsDB]

Materialize souce code

_this37.$inputField = _this37.$el.closest('.input-field');

so you have have the class input-field, follow the official document

  <div class="row">
    <div class="col s12">
      <div class="row">
        <div class="input-field col s12">
          <i class="material-icons prefix">textsms</i>
          <input type="text" id="autocomplete-input" class="autocomplete">
          <label for="autocomplete-input">Autocomplete</label>
        </div>
      </div>
    </div>
  </div>

However, in the prior version 0.1.0.0.2 the logic is:

As a word, if you are lucky to meet the problem. You have to add the class input-field in the input parent element(in my case , the parent element is div).