OLMIS-8114: Show errors when leaving table row

Clicking outside a table row on plain page content now shows the row validation errors.

Author: michaldev0

src/openlmis-table/tr-focused.directive.js

@@ -32,7 +32,9 @@
         .module('openlmis-table')
         .directive('tr', directive);
 
-    function directive() {
+    directive.$inject = ['$rootScope'];
+
+    function directive($rootScope) {
         var focusInRow, focusedRow, rows = [];
 
         return {
@@ -43,7 +45,8 @@
         function link(scope, element) {
             if (!rows.length) {
                 angular.element('body')
-                    .on('focusin', setSelectedRow);
+                    .on('focusin', setSelectedRow)
+                    .on('focusout', clearSelectedRowOnLeave);
             }
 
             if (rows.indexOf(element) === -1) {
@@ -76,7 +79,8 @@
 
                 if (!rows.length) {
                     angular.element('body')
-                        .off('focusin', setSelectedRow);
+                        .off('focusin', setSelectedRow)
+                        .off('focusout', clearSelectedRowOnLeave);
                 }
             }
         }
@@ -97,6 +101,25 @@
             focusInRow = undefined;
         }
 
+        function clearSelectedRowOnLeave(event) {
+            var related = event.relatedTarget ||
+                (event.originalEvent && event.originalEvent.relatedTarget);
+
+            // When focus moves to another focusable element a focusin follows and
+            // setSelectedRow handles the change. Only act when focus leaves to a
+            // non-focusable target (e.g. clicking outside the table), where no
+            // focusin fires and the row would otherwise keep the is-focused class.
+            if (related) {
+                return;
+            }
+
+            if (focusedRow) {
+                focusedRow.removeClass('is-focused');
+                focusedRow = undefined;
+                $rootScope.$evalAsync();
+            }
+        }
+
     }
 
 })();

src/openlmis-table/tr-focused.directive.spec.js

@@ -59,4 +59,40 @@ describe('TR Focused Directive', function() {
         expect(tr.hasClass('is-focused')).toBe(false);
     });
 
+    it('removes is-focused when focus leaves the row to a non-focusable target', function() {
+        var tr = this.table.find('tr:first');
+
+        this.table.find('input:first').focus();
+        this.$rootScope.$apply();
+
+        expect(tr.hasClass('is-focused')).toBe(true);
+
+        angular.element('body').triggerHandler({
+            type: 'focusout',
+            relatedTarget: null
+        });
+        this.$rootScope.$apply();
+
+        expect(tr.hasClass('is-focused')).toBe(false);
+    });
+
+    it('keeps is-focused when focus moves to another focusable element', function() {
+        var tr = this.table.find('tr:first');
+
+        this.table.find('input:first').focus();
+        this.$rootScope.$apply();
+
+        expect(tr.hasClass('is-focused')).toBe(true);
+
+        // A focusout with a relatedTarget is followed by a focusin that
+        // setSelectedRow handles, so the focusout handler must not clear here.
+        angular.element('body').triggerHandler({
+            type: 'focusout',
+            relatedTarget: this.table.find('input:last')[0]
+        });
+        this.$rootScope.$apply();
+
+        expect(tr.hasClass('is-focused')).toBe(true);
+    });
+
 });