Focus on newly created DNS server field
Got feedback from IBM's design team that to help usability after adding
a DNS Server field, focus on the newly created DNS server field.
Decided to go with a directive instead of putting this in a controller
after reading:
https://stackoverflow.com/questions/22292832/angular-ng-init-pass-element-to-scope,
https://github.com/angular/angular.js/issues/9031,
https://groups.google.com/forum/#!topic/angular/6uxWl8Z0DPw
Having dom manipulation code in the controller is frowned upon.
Tested: Verified the field is in focus (i.e. the cursor is in the
textbox).
Change-Id: Ia548361e7ac47363e05ea2963807bca0c5bf51e2
Signed-off-by: Gunnar Mills <gmills@us.ibm.com>
diff --git a/app/configuration/controllers/network-controller.js b/app/configuration/controllers/network-controller.js
index 9714931..9905157 100644
--- a/app/configuration/controllers/network-controller.js
+++ b/app/configuration/controllers/network-controller.js
@@ -9,6 +9,21 @@
window.angular && (function(angular) {
'use strict';
+ angular.module('app.configuration').directive('setFocusDnsField', function() {
+ return function(scope, element, attrs) {
+ var elem = window.document.getElementById(element[0].id);
+ // Focus on the newly created DNS server field
+ // Since this directive is also called when initializing DNS server fields
+ // on a page load, need to determine if the call is from a page load or
+ // from the user pressing the "Add new DNS server" button. The easiest way
+ // to do this is to check if the field is empty, if it is we know
+ // this is a new field since all empty fields are removed from the array.
+ if (!scope[attrs.ngModel] && elem) {
+ elem.focus();
+ }
+ };
+ });
+
angular.module('app.configuration').controller('networkController', [
'$scope', '$window', 'APIUtils', 'dataService', '$timeout', '$route', '$q',
function($scope, $window, APIUtils, dataService, $timeout, $route, $q) {
@@ -34,6 +49,11 @@
$scope.selectedInterface = interfaceId;
$scope.networkDevice = false;
};
+
+ $scope.addDNSField = function() {
+ $scope.interface.Nameservers.push('');
+ };
+
$scope.setNetworkSettings = function() {
// Hides the confirm network settings modal
$scope.confirm_settings = false;