I am facing a challenge where I need to focus on a specific input element. However, there is a spinner that appears on page load and remains hidden until certain http requests are completed. All inputs are disabled until the requests are finished. The setup looks like this:
<fieldset ng-disabled="!noPendingRequests">
...
<input id="input-to-focus-on" uib-datepicker-popup="MM/dd/yyyy" type="text" ng-model="startDate" ... />
<spinner ng-hide="noPendingRequests"></spinner>
</fieldset>
The spinner is a custom Angular directive. I have a requirement to autofocus on the #input-to-focus-on input, but I am encountering issues. I have attempted to set focus after all http requests are resolved using $q.all, but it has not been successful. It seems that the callback in $q is triggered before the input is enabled. I have also tried manually enabling the input like this:
$q.all(somePromises).then(function() {
angular.element('#input-to-focus-on')[0].disabled = false;
angular.element('#input-to-focus-on')[0].tabIndex = 1;
angular.element('#input-to-focus-on').focus();
});
I am currently stuck and would appreciate any guidance or assistance. Thank you in advance for your help!