forked from Dogfalo/materialize
-
-
Notifications
You must be signed in to change notification settings - Fork 107
Closed
Labels
Description
Bug description
If you add multiple autocomplete components on a page, their "onOptionClick" handlers are somehow interdependent
Here is an example (I just select options from 3 autocomplete in a row):
Codewise: in autocomplete.js
there is the following code:
let dropdownOptions = $.extend(
Autocomplete.defaults.dropdownOptions,
this.options.dropdownOptions
);
So on every init we extend default options with new dropdown options. I.e. we modify defaults every time we create a new autocomplete.
This was introduced in #60
Steps to Reproduce
Create 3 autocomplete, like this:
<div class="input-field">
<input id="autocomplete-input" class="autocomplete" type="text">
<label for="autocomplete-input">Autocomplete</label>
</div>
<div class="input-field">
<input id="autocomplete-input2" class="autocomplete" type="text">
<label for="autocomplete-input2">Autocomplete 2</label>
</div>
<div class="input-field">
<input id="autocomplete-input3" class="autocomplete" type="text">
<label for="autocomplete-input3">Autocomplete 3</label>
</div>
And then initialize them:
const autocompletes = document.querySelectorAll('.autocomplete');
M.Autocomplete.init(autocompletes, {
data: {
'Apples': null,
'Oranges': null,
'Bananas': null
}, minLength: 0
});
Then just select options in each autocomplete one by one
As a result, you will see the behavior from the GIF above