diff --git a/components/lib/orderlist/BaseOrderList.vue b/components/lib/orderlist/BaseOrderList.vue index 7f1326830..a02947f53 100644 --- a/components/lib/orderlist/BaseOrderList.vue +++ b/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, diff --git a/components/lib/orderlist/OrderList.d.ts b/components/lib/orderlist/OrderList.d.ts index a3af847fa..f1d367d30 100755 --- a/components/lib/orderlist/OrderList.d.ts +++ b/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. */ diff --git a/components/lib/orderlist/OrderList.vue b/components/lib/orderlist/OrderList.vue index c79c6ddd6..ba83b4a6f 100755 --- a/components/lib/orderlist/OrderList.vue +++ b/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(); diff --git a/components/lib/orderlist/style/OrderListStyle.js b/components/lib/orderlist/style/OrderListStyle.js index 242208912..3b3ab80a8 100644 --- a/components/lib/orderlist/style/OrderListStyle.js +++ b/components/lib/orderlist/style/OrderListStyle.js @@ -50,12 +50,7 @@ const classes = { } ], controls: 'p-orderlist-controls', - container: ({ instance }) => [ - 'p-orderlist-list-container', - { - 'p-focus': instance.focused - } - ], + container: 'p-orderlist-list-container', header: 'p-orderlist-header', list: 'p-orderlist-list', item: ({ instance, item, id }) => [ diff --git a/components/lib/picklist/BasePickList.vue b/components/lib/picklist/BasePickList.vue index fcbfb162a..468f4bdbd 100644 --- a/components/lib/picklist/BasePickList.vue +++ b/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, diff --git a/components/lib/picklist/PickList.d.ts b/components/lib/picklist/PickList.d.ts index bd261c721..befed7ed0 100755 --- a/components/lib/picklist/PickList.d.ts +++ b/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. */ diff --git a/components/lib/picklist/PickList.vue b/components/lib/picklist/PickList.vue index 883af4b13..c30618785 100755 --- a/components/lib/picklist/PickList.vue +++ b/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: { diff --git a/components/lib/picklist/style/PickListStyle.js b/components/lib/picklist/style/PickListStyle.js index c6f849c66..4f0545141 100644 --- a/components/lib/picklist/style/PickListStyle.js +++ b/components/lib/picklist/style/PickListStyle.js @@ -46,21 +46,11 @@ const classes = { } ], sourceControls: 'p-picklist-buttons p-picklist-source-controls', - sourceWrapper: ({ instance }) => [ - 'p-picklist-list-wrapper p-picklist-source-wrapper', - { - 'p-focus': instance.focused.sourceList - } - ], + sourceWrapper: 'p-picklist-list-wrapper p-picklist-source-wrapper', sourceHeader: 'p-picklist-header', sourceList: 'p-picklist-list p-picklist-source-list', buttons: 'p-picklist-buttons p-picklist-transfer-buttons', - targetWrapper: ({ instance }) => [ - 'p-picklist-list-wrapper p-picklist-target-wrapper', - { - 'p-focus': instance.focused.targetList - } - ], + targetWrapper: 'p-picklist-list-wrapper p-picklist-target-wrapper', targetHeader: 'p-picklist-header', targetList: 'p-picklist-list p-picklist-target', item: ({ instance, item, id, listIndex }) => [