Auto complete widget not working in dynamic templates

Hi ,

We are using MDB bootstrap-mdb/plugins/js/all.min.js and bootstrap-mdb/js/mdb.umd.min.js. If we use auto-complete in static pages it works very well.

We're using dynamic templates to render the contents so we manually init the component via javascript. In the version 7.0.0 auto-complete widget on search not showing the data list. The following code snippet is the ref. for how we init the components using js

Init function:

function init_auto_complete(){
const autocomplete = document.querySelectorAll('[data-mdb-input-init]');

autocomplete.forEach((autocomplete) => {
    new mdb.Autocomplete.getOrCreateInstance(autocomplete)
});

}

HTML with filter js

<div id="auto-select" class="form-outline autocomplete" data-mdb-input-init>
        <input type="text" id="form2" class="form-control" />
        <label class="form-label" for="form2">Example label</label>
      </div>

<script>const basicAutocomplete1 = document.querySelector('#auto-select');
const data1 = ['One', 'Two', 'Three'];
const dataFilter1 = (value) => {
  return data1.filter((item) => {
    return item.toLowerCase().startsWith(value.toLowerCase());
  });
};
new mdb.Autocomplete(basicAutocomplete1, {
  filter: dataFilter1
});</script>

Actual behavior On focus or on typing the text list of data shown in the panel below the input widget.

Resources (screenshots, code snippets etc.)