[Bug]: Autocomplete selectOption does nothing

[ygorma]

Before submitting...

• I have searched for duplicate or closed issues.
• I have read the CONTRIBUTING document and my issue is following the guidelines.
• I have read the template completely before filling it in.

Context

Simply selectOption(); does not select an option.

Current Behavior

No option gets selected.

Expected behavior

Autocomplete loaded with an option selected. It would be perfect if there was an autocomplete initialization option which requires the id and do all the rest for us. Like:

document.addEventListener('DOMContentLoaded', function() {
    var elems = document.querySelectorAll('.autocomplete');
    var instances = M.Autocomplete.init(elems, {
      // specify options here
      minLength: 0, // shows instantly
      data: [
        {id: 12, text: "Apple"},
        {id: 13, text: "Microsoft"},
        {id: 42, text: "Google", image: 'http://placehold.it/250x250'}
      ],
      defaultOption: 12
    });
  });

Possible Solutions or Causes

Using this code to make it work.

selectOption(id) {
    const entry = this.options.data.find((item) => item.id == id);
    if (this.options.isMultiSelect) {
        const li = this.container.querySelector('li[data-id="' + id + '"]');
        const checkbox = li.querySelector('input[type="checkbox"]');
        checkbox.checked = !checkbox.checked;
        if (checkbox.checked)
            this.selectedValues.push(entry);
        else
            this.selectedValues = this.selectedValues.filter((selectedEntry) => selectedEntry.id !== entry.id);
        this.el.focus();
    }
    else {
        // Single-Select
        this.selectedValues = [entry];
        this._refreshInputText();
        this._resetAutocomplete();
        this.close();
    }
    this._updateSelectedInfo();
    this._triggerChanged();
}

Steps to reproduce

<script>

  document.addEventListener('DOMContentLoaded', function() {
    var elems = document.querySelectorAll('[id="1.id_modelo.autocomplete"]');
    var instances = M.Autocomplete.init(elems, {
      // specify options here
      minLength: 0, // shows instantly
      data: [
        {id: 2, text: "Teste"},
        {id: 3, text: "Parecer"}
      ]    
    });

    const autocomplete = document.querySelector('[id="1.id_modelo.autocomplete"]');
    let instance = M.Autocomplete.getInstance(autocomplete);
    instance.selectOption(2);

  });

</script>

Your Environment

• Version used: Materialize v2.0.4
• Browser Name and version: Edge 125.0.2535.51
• Operating System and version (desktop or mobile): Windows 10
• Additional information you want to tell us: N/A

[IvanPostu]

@ygorma Hi, I analyzed implementation of autocomplete component, the idea of selectOption() is to chose an item from dropdown which appears after user write something.

For the case you described here you should call

instance.setValues([
  { id: 2, text: "Teste" },
]);

instead of

instance.selectOption(2);

[IvanPostu]

@wuda-io Hi, I think this issue can be closed, btw I noticed that both setValues and selectOption aren't covered by tests. Can I prepare a patch which test them linked to this issue or should be opened a separate issue for that?