autocomplete arbitrarily adds data to dropdown after pressin

This is my autocomplete:

<div class="md-form">
                <i class="fas fa-search prefix fa-sm text-default"
                    style="    font-size: 24px!important;
    height: 24px;
    bottom: 0;
    width: 24px;
    margin: auto;"
                ></i>
                <input type="search" id="form-autocomplete" class="form-control mdb-autocomplete" autocomplete="off"
                    placeholder="Cerca locale.."
                >
                <button class="mdb-autocomplete-clear">
                    <svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="https://www.w3.org/2000/svg">
                        <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" />
                        <path d="M0 0h24v24H0z" fill="none" />
                    </svg>
                </button>

            </div>

Using standard js initialization :

$('#form-autocomplete').mdbAutocomplete({
            data: this.lastResult.data.vendors
        });

This is what data looks like at initialization:

You can clearly see there is only one item both in the dropdown and in the array passed ad initialization, and search input is valued with "9"

Okay, let's suppose I now press ENTER with the search input containing "9". Look what happens:

Retrosteps: Pressed enter with searchbox containing "9" text, dropdown closed, cleared the searchbox using normal delete button, retyped "9", dropdown now shows two items. Also when checking the array which I passed at initialization, I notice it now contains two items. Why?