Skip to content

Autocomplete share "onOptionClick" for multiple instances #93

@bugy

Description

@bugy

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):
autocompletes_bug

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

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions