[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?

[gselderslaghs]

I'm experiencing different results in the usage of the setValues method in various scenarios, I guess it needs additional refinement before this issue can be closed

Scenario 1 - Call setValues with initial data set
When the setValues method is called with an item list containing the id's of the initial data, the component selects the given entries in the item list
Data entry names remain as initialized

Scenario 2 - Call setValues without initial data
In this scenario no data is set on initialization, we call the setValues method with a list of entries, the entries are created as defined in the setValues method, passed entries are selected

Scenario 3 - Call setValues with initial data and addition of non existing items
Compare the addition of items to scenario 2, where items are being added by setValues
If we call setValues with initial data set, no new items are added but initial items set on the data property are selected

A bit confusing about how this currently works
Most logical would be if we have:

• functionality to select one or multiple entries on initialization (new feature request, as mentioned by @ygorma)
• functionality to create, update and delete entries from data property (currently setMenuItems method, needs review: seems to reset the list when closed/reopened)
• functionality to select one (currently selectOpion method: Codepen example or multiple entries from method call (setValues method as mentioned by @IvanPostu, needs review as of the previous mentioned scenarios)

Needs review, i'll add new issues regarding to create/update/delete and select multiple

[gselderslaghs]

I implemented an additional option selected that allows an array of alphanumeric ids, given the items ids of the menu items
This implementation maps the selected ids in the selectedValues object array and handles selection of single or multiple items. This implementation can be reviewed in #577, I've added additional examples how to use the new feature