Service Portal Widget Set Focus

[adam_katulak]

Hi,

Does anyone know of a way to set the focus of an input in a Service Portal Widget?

I have an input, that onChange calls a script in the client controller.   As part of the client controller script, I need to automatically set focus on another input field at the bottom of my form.

Here are some snippets

HTML

<div class="form-group required" ng-if="c.data.scan_location_barcode=='yes'">
           <label class="control-label">${Location barcode}</label>
           <input class="form-control" ng-model="c.data.location_barcode" field="location_barcode" ng-change="c.setLocation()" required="true" ng-model-options="{debounce: 500}") />
           <div ng-if="c.isNative">${Scan using your phone}<i class="fa fa-barcode fa-4" ng-click="c.getLocationBarcode()"></i></div>
 </div>
 <div ng-if="!c.manualScan">
         <input class="form-control" id="barcode" type="text" ng-model="c.data.barcode" ng-model-options="{debounce: 50}" ng-change="c.display()" ng-disabled="c.data.isLoading"/>
 </div>

Client Controller

c.setLocation = function() {
c.server.update().then(function(data) {
c.data.customer = data.customer;
c.data.room = data.room;
c.data.location = data.location;
//Adding field values and listeners
$scope.company = {
displayValue : c.data.customer,
value : c.data.customer_id,
name : 'company'
};
$scope.department = {
displayValue : c.data.location,
value : c.data.location_id,
name : 'department'
};
$scope.room = {
displayValue : c.data.room,
value : c.data.room_id,
name : 'room'
};
$window.setTimeout(1000);
var el = $window.document.getElementById("barcode");
el.focus();
});

[Domenic Horner · Accepted solution]

Hey Adam,

You should be able to append "autofocus" into your input field.

HTML input autofocus Attribute

<input class="form-control" id="barcode" type="text" ng-model="c.data.barcode" ng-model-options="{debounce: 50}" ng-change="c.display()" ng-disabled="c.data.isLoading" autofocus/>  

Let me know if this works for you.

- Dom

[adam_katulak]

That worked perfect!   Thanks!

[m_osborne]

Hello Domenic,

I am applying this to the Typeahead Search widget of the service portal. My goal is to always redirect the cursor to the search bar when a page loads. This works on initial loads of each page via the url bar, but the focus is lost if I click on links in the portal to redirect to other pages. 

For instance, if I load the portal homepage for the first time, the search bar is in focus. If I click on "Service Catalog" from the homepage, the search bar is no longer in focus on the redirected page.

Any help to get this figured out would be appreciated.

Thank you,

-Mel

[abuthahir]

Did you get a solution for this.?