Expected behavior

I have an input with an a floating label and Autocomplete component that I need to be able to set to empty through Javascript. I want the label to return to the center of the component after the reset.

Actual behavior

When doing "autocompleteInput.value = null", the value gets set to empty, but the floating label stays aligned with the border of the component instead of returning to the center of the input, as shown in below snippet.

I have tried using the below code as part of my reset function, and it does seem to work, but it requires changing internal properties, which I'd rather avoid doing.

    mdb.Autocomplete.getOrCreateInstance(autocompleteContainer)._isOpen = true;
    mdb.Autocomplete.getOrCreateInstance(autocompleteContainer).close();
    mdb.Autocomplete.getOrCreateInstance(autocompleteContainer)._isOpen = false;

Is there a more correct way of emptying an AutoComplete component such that it has a null value and the label back in the center?

Resources (screenshots, code snippets etc.)

https://mdbootstrap.com/snippets/standard/ikan_nak/6300117#html-tab-view