Merge pull request #5783 from opf/fix/25832-column-highlighted-when-adding-to-page

[25832] Column highlighted when adding to page

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>

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');
         }
       });
     }