New pop up modal does not close after a search

[PreethikaW]

We have added a pop up which appears if the user waits on the same screen for couple of seconds.

Pop up comes with a typeahead widget within it -> user enters the text and hits enter ->the search works however, the pop up does not close. The result appears in teh backend. Can we please get an idea to deal with this.

requirement-> user enters into type ahead search -> hits enter->pop up closes -> results appear.

in second screenshot you can see that the search result for "test" search appears but in the background. the pop up still remains same. Client controller code used for the widget:

api.controller = function($scope, spModal, $timeout) {

    var delayInMs = 2000;

    $timeout(function() {

        var modalInstance = spModal.open({

            title: 'Cannot find the catalog you are looking for? Try using the search below to quickly locate what you need.',

            widget: 'typeahead-search',

            size: 'md',

            buttons: []

        });

        $timeout(function() {

            var input = document.querySelector('.sp-modal input[type="text"]');

            if (input) {

                input.focus();

                // Close modal when input loses focus

                input.addEventListener('blur', function() {

                    $timeout(function() {

                        modalInstance.close();

                    }, 300); // Delay to allow search to complete

                });

            } else {

                console.warn('Typeahead input not found.');

            }

        }, 1000); // Wait for modal and widget to render

    }, delayInMs);

};