TomTom API - Input has value but remains untouched

Question

I'm using the TomTom FuzzySearch/Autocomplete API, to allow users to search for an address on a form and then the address input fields will prepopulate (with the address values), when the user selects an address.

My API call works absolutely fine and the input fields display the correct values.

The problem I have, is the input fields remain untouched, despite the fields having a value. (If I type document.getElementById("house-number-textbox").value, a value is returned).

How can I turned the input fields to be touched, when the input values are applied?

I noticed, if I type something in the input field, after my input values have been added, only then does the form register my inputs as valid/touched.

PS - The reason I am injecting my scripts is because I'm using an AB Testing tool. So despite the form/application being AngularJS, I can only manipulate the form via the AB Testing tool, (on top of the compiled codebase - hence why I'm using vanilla JS).

Here's my code:

function waitForElement(className, callBack){
    window.setTimeout(function(){
        var element = document.getElementById(className);
        if(element) {
            callBack(className, element);
        } else {
            waitForElement(className, callBack);
        }
    },2000)
};

// LOAD API SCRIPTS
function loadScript(scriptUrl) {
    const script = document.createElement('script');
    script.src = scriptUrl;
    document.body.appendChild(script);

    return new Promise((res, rej) => {
      script.onload = function() {
        res();
      }
      script.onerror = function () {
        rej();
      }
    });
};


// RESULTS MANAGER
function appendParentSelector(parentSelector, selector) {
    return parentSelector ? parentSelector + ' ' + selector : selector;
}


function ResultsManager(resultsElementSelector) {
    this.resultsElement = document.querySelector(appendParentSelector(resultsElementSelector, '.js-results'));
    this.resultsPlaceholder =
        document.querySelector(appendParentSelector(resultsElementSelector, '.js-results-placeholder'));
    this.resultsLoader = document.querySelector(appendParentSelector(resultsElementSelector, '.js-results-loader'));
}

ResultsManager.prototype.loading = function() {
    this.resultsLoader.removeAttribute('hidden');
    this.resultsElement.setAttribute('hidden', 'hidden');
    this.resultsPlaceholder.setAttribute('hidden', 'hidden');
    this.resultsElement.innerHTML = '';
};

ResultsManager.prototype.success = function() {
    this.resultsLoader.setAttribute('hidden', 'hidden');
    this.resultsElement.removeAttribute('hidden');
};

ResultsManager.prototype.resultsNotFound = function() {
    this.resultsElement.setAttribute('hidden', 'hidden');
    this.resultsLoader.setAttribute('hidden', 'hidden');
    this.resultsPlaceholder.removeAttribute('hidden');
};

ResultsManager.prototype.append = function(element) {
    this.resultsElement.appendChild(element);
};

ResultsManager.prototype.clear = function() {
    for (var i = 0; i < this.resultsElement.children.length; i++) {
        this.resultsElement.removeChild(this.resultsElement.children[i]);
    }
};


waitForElement("house-number-textbox",function(){
    console.log("WAIT FOR ELEMENT DONE");
    window.ResultsManager = window.ResultsManager || ResultsManager;

    console.log("document.getElementById(component)", document.getElementById("house-number-textbox") );

      // use
      loadScript('https://api.tomtom.com/maps-sdk-for-web/cdn/plugins/SearchBox/2.24.2//SearchBox-web.js')
        .then(() => {
          console.log('Script loaded!');
        })
        .catch(() => {
          console.error('Script loading failed! Handle this error');
        });

        // use
        loadScript('https://api.tomtom.com/maps-sdk-for-web/cdn/5.x/5.64.0/services/services-web.min.js')
        .then(() => {
            console.log('Script loaded!');

                     // HANDLE RESULTS
        tt.setProductInfo('ABTest', '1');
        // Options for the fuzzySearch service
        var searchOptions = {
            key: 'XXX',
            language: 'en-Gb',
            limit: 10,
            countrySet: "GB"
        };


        var searchBoxOptions = {
            minNumberOfCharacters: 1,
            searchOptions: searchOptions
            // autocompleteOptions: autocompleteOptions
        };
        var ttSearchBox = new tt.plugins.SearchBox(tt.services, searchBoxOptions);
        document.querySelector('.tt-side-panel__header').appendChild(ttSearchBox.getSearchBoxHTML());


        let componentForm = {
            // streetName: "house-number-textbox",
            municipalitySubdivision: "street-name-textbox",
            localName: "town-city-textbox",
            extendedPostalCode: "postcode-textbox"
        };

        function SidePanel(selector) {
            // this.map = map;
            this.element = document.querySelector(selector);
        }

        new SidePanel('.tt-side-panel');
        var resultsManager = new ResultsManager();

        ttSearchBox.on('tomtom.searchbox.resultscleared', handleResultsCleared);
        ttSearchBox.on('tomtom.searchbox.resultsfound', handleResultsFound);
        ttSearchBox.on('tomtom.searchbox.resultfocused', handleResultSelection);
        ttSearchBox.on('tomtom.searchbox.resultselected', handleResultSelection);

        function handleResultsCleared() {
            resultsManager.clear();
        }

        // HANDLE RESULST
        function handleResultsFound(event) {
            // Display fuzzySearch results if request was triggered by pressing enter
            if (event.data.results && event.data.results.fuzzySearch && event.data.metadata.triggeredBy === 'submit') {
                var results = event.data.results.fuzzySearch.results;

                if (results.length === 0) {
                    handleNoResults();
                }
                resultsManager.success();
                console.log("results", results);
            }

            if (event.data.errors) {
                console("event.data.errors", event.data.errors);
            }
        }

        // RESPONSE
        function handleResultSelection(event) {
            if (isFuzzySearchResult(event)) {
                // Display selected result on the map
                var result = event.data.result;
                console.log("THIS result", result);
;
                resultsManager.success();

                for (const component in componentForm) {
                    console.log("componentForm", componentForm);

                    document.getElementById(componentForm[component]).value = result.address[component];
                    document.getElementById(componentForm[component]).disabled = false;
                    console.log('component', componentForm[component]);

     

           if (document.getElementById(componentForm[component]).value === 'undefined') {
                    document.getElementById(componentForm[component]).value = "";
                }
            };

            if (result.address.streetNumber) {
                document.getElementById("house-number-textbox").value = result.address.streetNumber + " " + result.address.streetName;
            } else {
                document.getElementById("house-number-textbox").value = result.address.streetName;
            };
        };
    }

    function isFuzzySearchResult(event) {
        return !('matches' in event.data.result);
    }

    function handleNoResults() {
        resultsManager.clear();
        resultsManager.resultsNotFound();
        searchMarkersManager.clear();
        infoHint.setMessage(
            'No results for "' +
            ttSearchBox.getValue() +
            '" found nearby. Try changing the viewport.'
        );
    };
    document.querySelector(".tt-search-box-input").setAttribute("placeholder", "Enter your address...");


    })
    .catch(() => {
        console.error('Script loading failed! Handle this error');
    });

});