From 35f94932903b6009776cc3582890b2bc5e04dcc0 Mon Sep 17 00:00:00 2001
From: Henriette Dinger <h.dinger@openproject.com>
Date: Fri, 21 Jul 2017 14:34:28 +0200
Subject: [PATCH] Avoid highlighting when column is added

---
 .../app/components/wp-table/wp-table.directive.html   |  2 +-
 frontend/app/ui_components/highlight-col-directive.js | 11 +++++++++--
 2 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/frontend/app/components/wp-table/wp-table.directive.html b/frontend/app/components/wp-table/wp-table.directive.html
index 5c59d497b4..6d1025b898 100644
--- a/frontend/app/components/wp-table/wp-table.directive.html
+++ b/frontend/app/components/wp-table/wp-table.directive.html
@@ -2,8 +2,8 @@
   <div class="work-packages-tabletimeline--table-side work-package-table--container">
     <table class="keyboard-accessible-list generic-table work-package-table">
       <colgroup>
-        <col highlight-col/>
         <col highlight-col ng-repeat="column in columns track by column.href"/>
+        <col highlight-col/>
       </colgroup>
       <caption class="hidden-for-sighted">
         <span ng-bind="::text.tableSummary"></span>
diff --git a/frontend/app/ui_components/highlight-col-directive.js b/frontend/app/ui_components/highlight-col-directive.js
index 69eb0f388e..7622688854 100644
--- a/frontend/app/ui_components/highlight-col-directive.js
+++ b/frontend/app/ui_components/highlight-col-directive.js
@@ -31,9 +31,16 @@ module.exports = function() {
     link: function(scope, element) {
       var thead = element.parent('colgroup').siblings('thead');
 
-      thead.on('mouseenter mouseleave', 'th', function() {
+      // Separte handling instead of toggle is neccessary to avoid
+      // unwanted side effects when adding/removing columns via keyboard in the modal
+      thead.on('mouseenter', 'th', function() {
         if (element.index() === jQuery(this).index()) {
-          element.toggleClass('hover');
+          element.addClass('hover');
+        }
+      });
+      thead.on('mouseleave', 'th', function() {
+        if (element.index() === jQuery(this).index()) {
+          element.removeClass('hover');
         }
       });
     }