Merge branch 'master' of https://github.com/primefaces/primevue

components/lib/orderlist/BaseOrderList.vue

@@ -28,7 +28,11 @@ export default {
         },
         autoOptionFocus: {
             type: Boolean,
-            default: false
+            default: true
+        },
+        focusOnHover: {
+            type: Boolean,
+            default: true
         },
         responsive: {
             type: Boolean,

components/lib/orderlist/OrderList.d.ts

@@ -227,9 +227,14 @@ export interface OrderListProps {
     metaKeySelection?: boolean | undefined;
     /**
      * Whether to focus on the first visible or selected element.
-     * @defaultValue false
+     * @defaultValue true
      */
     autoOptionFocus?: boolean | undefined;
+    /**
+     * When enabled, the focus is placed on the hovered option.
+     * @defaultValue true
+     */
+    focusOnHover?: boolean | undefined;
     /**
      * Inline style of the the list element.
      */

components/lib/orderlist/OrderList.vue

@@ -62,8 +62,9 @@
                         :class="cx('item', { item, id: `${id}_${i}` })"
                         @click="onItemClick($event, item, i)"
                         @touchend="onItemTouchEnd"
-                        :aria-selected="isSelected(item)"
                         @mousedown="onOptionMouseDown(i)"
+                        @mousemove="onOptionMouseMove(i)"
+                        :aria-selected="isSelected(item)"
                         v-bind="getPTOptions(item, 'item', i)"
                         :data-p-highlight="isSelected(item)"
                         :data-p-focused="`${id}_${i}` === focusedOptionId"
@@ -191,6 +192,11 @@ export default {
             this.focused = true;
             this.focusedOptionIndex = index;
         },
+        onOptionMouseMove(index) {
+            if (this.focusOnHover && this.focused) {
+                this.changeFocusedOptionIndex(index);
+            }
+        },
         onArrowDownKey(event) {
             const optionIndex = this.focusedOptionIndex !== -1 ? this.findNextOptionIndex() : this.findFirstSelectedOptionIndex();
 

components/lib/orderlist/style/OrderListStyle.js

@@ -50,12 +50,7 @@ const classes = {
         }
     ],
     controls: 'p-orderlist-controls',
-    container: ({ instance }) => [
+    container: 'p-orderlist-list-container',
-        'p-orderlist-list-container',
-        {
-            'p-focus': instance.focused
-        }
-    ],
     header: 'p-orderlist-header',
     list: 'p-orderlist-list',
     item: ({ instance, item, id }) => [

components/lib/picklist/BasePickList.vue

@@ -28,7 +28,11 @@ export default {
         },
         autoOptionFocus: {
             type: Boolean,
-            default: false
+            default: true
+        },
+        focusOnHover: {
+            type: Boolean,
+            default: true
         },
         responsive: {
             type: Boolean,

components/lib/picklist/PickList.d.ts

@@ -337,9 +337,14 @@ export interface PickListProps {
     metaKeySelection?: boolean | undefined;
     /**
      * Whether to focus on the first visible or selected element.
-     * @defaultValue false
+     * @defaultValue true
      */
     autoOptionFocus?: boolean | undefined;
+    /**
+     * When enabled, the focus is placed on the hovered option.
+     * @defaultValue true
+     */
+    focusOnHover?: boolean | undefined;
     /**
      * Inline style of the the list element.
      */

components/lib/picklist/PickList.vue

@@ -71,6 +71,7 @@
                         @dblclick="onItemDblClick($event, item, 0)"
                         @touchend="onItemTouchEnd"
                         @mousedown="onOptionMouseDown(i, 'sourceList')"
+                        @mousemove="onOptionMouseMove(i, 'sourceList')"
                         role="option"
                         :aria-selected="isSelected(item, 0)"
                         v-bind="getPTOptions(item, 'item', `${idSource}_${i}`, 0)"
@@ -162,6 +163,7 @@
                         @dblclick="onItemDblClick($event, item, 1)"
                         @keydown="onItemKeyDown($event, 'targetList')"
                         @mousedown="onOptionMouseDown(i, 'targetList')"
+                        @mousemove="onOptionMouseMove(i, 'targetList')"
                         @touchend="onItemTouchEnd"
                         role="option"
                         :aria-selected="isSelected(item, 1)"
@@ -313,6 +315,11 @@ export default {
             this.focused[listType] = true;
             this.focusedOptionIndex = index;
         },
+        onOptionMouseMove(index, listType) {
+            if (this.focusOnHover && this.focused[listType]) {
+                this.changeFocusedOptionIndex(index, listType);
+            }
+        },
         moveUp(event, listIndex) {
             if (this.d_selection && this.d_selection[listIndex]) {
                 let valueList = [...this.modelValue[listIndex]];
@@ -902,7 +909,7 @@ export default {
             return ObjectUtils.isEmpty(this[list]);
         },
         hasSelectedOption(listType) {
-            return listType === 'sourceList' ? ObjectUtils.isNotEmpty(this.d_selection[0]) : ObjectUtils.isNotEmpty(this.d_selection[0]);
+            return listType === 'sourceList' ? ObjectUtils.isNotEmpty(this.d_selection[0]) : ObjectUtils.isNotEmpty(this.d_selection[1]);
         }
     },
     computed: {

components/lib/picklist/style/PickListStyle.js

@@ -46,21 +46,11 @@ const classes = {
         }
     ],
     sourceControls: 'p-picklist-buttons p-picklist-source-controls',
-    sourceWrapper: ({ instance }) => [
+    sourceWrapper: 'p-picklist-list-wrapper p-picklist-source-wrapper',
-        'p-picklist-list-wrapper p-picklist-source-wrapper',
-        {
-            'p-focus': instance.focused.sourceList
-        }
-    ],
     sourceHeader: 'p-picklist-header',
     sourceList: 'p-picklist-list p-picklist-source-list',
     buttons: 'p-picklist-buttons p-picklist-transfer-buttons',
-    targetWrapper: ({ instance }) => [
+    targetWrapper: 'p-picklist-list-wrapper p-picklist-target-wrapper',
-        'p-picklist-list-wrapper p-picklist-target-wrapper',
-        {
-            'p-focus': instance.focused.targetList
-        }
-    ],
     targetHeader: 'p-picklist-header',
     targetList: 'p-picklist-list p-picklist-target',
     item: ({ instance, item, id, listIndex }) => [

doc/common/apidoc/index.json

@@ -37551,9 +37551,17 @@
                             "optional": true,
                             "readonly": false,
                             "type": "boolean",
-                            "default": "false",
+                            "default": "true",
                             "description": "Whether to focus on the first visible or selected element."
                         },
+                        {
+                            "name": "focusOnHover",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "true",
+                            "description": "When enabled, the focus is placed on the hovered option."
+                        },
                         {
                             "name": "listStyle",
                             "optional": true,
@@ -42050,9 +42058,17 @@
                             "optional": true,
                             "readonly": false,
                             "type": "boolean",
-                            "default": "false",
+                            "default": "true",
                             "description": "Whether to focus on the first visible or selected element."
                         },
+                        {
+                            "name": "focusOnHover",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "true",
+                            "description": "When enabled, the focus is placed on the hovered option."
+                        },
                         {
                             "name": "listStyle",
                             "optional": true,