MAGETWO-44647: Broken keyboard navigation in ui-select

Author: Volodymyr Zaets

app/code/Magento/Ui/view/base/web/js/form/element/ui-select.js

@@ -7,8 +7,9 @@ define([
     'underscore',
     './abstract',
     'Magento_Ui/js/lib/key-codes',
-    'mage/translate'
-], function (_, Abstract, keyCodes, $t) {
+    'mage/translate',
+    'jquery'
+], function (_, Abstract, keyCodes, $t, $) {
     'use strict';
 
     /**
@@ -46,6 +47,7 @@ define([
             filterInputValue: '',
             filterOptionsFocus: false,
             multiselectFocus: false,
+            mouseSenvity: null,
             selectedPlaceholders: {
                 defaultPlaceholder: $t('Select...'),
                 lotPlaceholders: $t('Selected')
@@ -239,9 +241,7 @@ define([
         },
 
         /**
-         * get filtered value
-         *
-         * @returns {Array} filtered array
+         * Get filtered value*
          */
         getValue: function () {
             var options = this.options(),
@@ -255,7 +255,7 @@ define([
         },
 
         /**
-         * get selected element labels
+         * Get selected element labels
          *
          * @returns {Array} array labels
          */
@@ -301,16 +301,45 @@ define([
          *
          * @param {Object} data - object with data about this element
          * @param {Number} index - element index
+         * @param {Object} event - mousemove event
+         */
+
+        onMousemove: function (data, index, event) {
+            var target = $(event.target),
+                id;
+
+            if (this.isCursorPositionChange(event)) {
+                return false;
+            }
+
+            target.is('li') ? id = target.index() : id = target.parent('li').index();
+            id !== this.hoverElIndex() ? this.hoverElIndex(id) : false;
+
+            this.setCursorPosition(event);
+        },
+
+        /**
+         * Set X and Y cursor position
+         *
+         * @param {Object} event - mousemove event
          */
-        onHoveredIn: function (data, index) {
-            this.hoverElIndex(index);
+        setCursorPosition: function (event) {
+            this.cursorPosition = {
+                x: event.pageX,
+                y: event.pageY
+            };
         },
 
         /**
-         * Remove hover to some list element and write element ID from variable
+         * Check previous and current cursor position
+         *
+         * @param {Object} event - mousemove event
+         * @returns {Boolean}
          */
-        onHoveredOut: function () {
-            this.hoverElIndex(null);
+        isCursorPositionChange: function (event) {
+            return this.cursorPosition &&
+                   this.cursorPosition.x === event.pageX &&
+                   this.cursorPosition.y === event.pageY;
         },
 
         /**
@@ -360,6 +389,7 @@ define([
                 if (this.hoverElIndex() !== this.options().length - 1) {
                     this.hoverElIndex(this.hoverElIndex() + 1);
                 } else {
+                    this.mouseSenvity = 0;
                     this.hoverElIndex(0);
                 }
             } else {
@@ -394,7 +424,7 @@ define([
             var keyName = keyCodes[event.keyCode];
 
             if (this.isTabKey(event)) {
-                if (!this.filterOptionsFocus() && this.listVisible() && this.filterOptions ) {
+                if (!this.filterOptionsFocus() && this.listVisible() && this.filterOptions) {
                     this.cacheUiSelect.blur();
                     this.filterOptionsFocus(true);
                     this.cleanHoveredElement();

app/code/Magento/Ui/view/base/web/templates/grid/filters/elements/ui-select.html

@@ -88,7 +88,12 @@
             </label>
         </div>
         <!-- /ko -->
-        <ul class="admin__action-multiselect-menu-inner">
+        <ul class="admin__action-multiselect-menu-inner"
+            data-bind="
+                event: {
+                    mousemove: function(){onMousemove($data, $index(), event)}
+                }
+            ">
             <!-- ko foreach: { data: options, as: 'option'}  -->
             <li
                 class="action-menu-item"
@@ -97,10 +102,6 @@
                                 _selected: $parent.isSelected(option.value),
                                 _hover: $parent.isHovered($index(), $element)
                             },
-                            event: {
-                                mouseenter: function(){$parent.onHoveredIn($data, $index())},
-                                mouseleave: function(){$parent.onHoveredOut($data, $index())},
-                            },
                             click: $parent.toggleOptionSelected.bind($parent, $data, $index())">
                 <input
                     class="admin__control-checkbox"