From 54a7a4fb50e27c67ffc253177e06574ab081a8d7 Mon Sep 17 00:00:00 2001 From: tugcekucukoglu Date: Wed, 17 Jan 2024 17:09:34 +0300 Subject: [PATCH] Fixed #5099 - autoOptionFocus property added to Input-like components --- api-generator/components/orderlist.js | 6 ++++++ api-generator/components/picklist.js | 6 ++++++ components/lib/orderlist/BaseOrderList.vue | 4 ++++ components/lib/orderlist/OrderList.d.ts | 5 +++++ components/lib/orderlist/OrderList.vue | 11 ++++++----- components/lib/orderlist/style/OrderListStyle.js | 7 ++++++- components/lib/picklist/BasePickList.vue | 4 ++++ components/lib/picklist/PickList.d.ts | 5 +++++ components/lib/picklist/PickList.vue | 11 ++++++----- components/lib/picklist/style/PickListStyle.js | 14 ++++++++++++-- 10 files changed, 60 insertions(+), 13 deletions(-) diff --git a/api-generator/components/orderlist.js b/api-generator/components/orderlist.js index d8f25a844..7c80b113d 100644 --- a/api-generator/components/orderlist.js +++ b/api-generator/components/orderlist.js @@ -18,6 +18,12 @@ const OrderListProps = [ description: 'Defines whether metaKey is requred or not for the selection. When true metaKey needs to be pressed to select or unselect an item and when set to false selection of each item can be toggled individually. On touch enabled devices, metaKeySelection is turned off automatically.' }, + { + name: 'autoOptionFocus', + type: 'boolean', + default: 'false', + description: 'Whether to focus on the first visible or selected element when the overlay panel is shown.' + }, { name: 'dataKey', type: 'string', diff --git a/api-generator/components/picklist.js b/api-generator/components/picklist.js index 27d1a905e..7b8e99b5e 100644 --- a/api-generator/components/picklist.js +++ b/api-generator/components/picklist.js @@ -18,6 +18,12 @@ const PickListProps = [ description: 'Defines whether metaKey is requred or not for the selection. When true metaKey needs to be pressed to select or unselect an item and when set to false selection of each item can be toggled individually. On touch enabled devices, metaKeySelection is turned off automatically.' }, + { + name: 'autoOptionFocus', + type: 'boolean', + default: 'false', + description: 'Whether to focus on the first visible or selected element when the overlay panel is shown.' + }, { name: 'dataKey', type: 'string', diff --git a/components/lib/orderlist/BaseOrderList.vue b/components/lib/orderlist/BaseOrderList.vue index b34888f41..7f1326830 100644 --- a/components/lib/orderlist/BaseOrderList.vue +++ b/components/lib/orderlist/BaseOrderList.vue @@ -26,6 +26,10 @@ export default { type: Boolean, default: false }, + autoOptionFocus: { + type: Boolean, + default: false + }, responsive: { type: Boolean, default: true diff --git a/components/lib/orderlist/OrderList.d.ts b/components/lib/orderlist/OrderList.d.ts index 3a403a430..a3af847fa 100755 --- a/components/lib/orderlist/OrderList.d.ts +++ b/components/lib/orderlist/OrderList.d.ts @@ -225,6 +225,11 @@ export interface OrderListProps { * @defaultValue false */ metaKeySelection?: boolean | undefined; + /** + * Whether to focus on the first visible or selected element. + * @defaultValue false + */ + autoOptionFocus?: boolean | undefined; /** * Inline style of the the list element. */ diff --git a/components/lib/orderlist/OrderList.vue b/components/lib/orderlist/OrderList.vue index 345c3e825..9c7b214dc 100755 --- a/components/lib/orderlist/OrderList.vue +++ b/components/lib/orderlist/OrderList.vue @@ -140,18 +140,19 @@ export default { return ObjectUtils.findIndexInList(item, this.d_selection) != -1; }, onListFocus(event) { - const selectedFirstItem = DomHandler.findSingle(this.list, '[data-p-highlight="true"]') || DomHandler.findSingle(this.list, '[data-pc-section="item"]'); + this.focused = true; + const selectedFirstItem = this.autoOptionFocus + ? DomHandler.findSingle(this.list, '[data-p-highlight="true"]') || DomHandler.findSingle(this.list, '[data-pc-section="item"]') + : DomHandler.findSingle(this.list, '[data-p-highlight="true"]'); if (selectedFirstItem) { const findIndex = ObjectUtils.findIndexInList(selectedFirstItem, this.list.children); - - this.focused = true; - const index = this.focusedOptionIndex !== -1 ? this.focusedOptionIndex : selectedFirstItem ? findIndex : -1; this.changeFocusedOptionIndex(index); - this.$emit('focus', event); } + + this.$emit('focus', event); }, onListBlur(event) { this.focused = false; diff --git a/components/lib/orderlist/style/OrderListStyle.js b/components/lib/orderlist/style/OrderListStyle.js index 8b8daf0a7..242208912 100644 --- a/components/lib/orderlist/style/OrderListStyle.js +++ b/components/lib/orderlist/style/OrderListStyle.js @@ -50,8 +50,13 @@ const classes = { } ], controls: 'p-orderlist-controls', + container: ({ instance }) => [ + 'p-orderlist-list-container', + { + 'p-focus': instance.focused + } + ], header: 'p-orderlist-header', - container: 'p-orderlist-list-container', list: 'p-orderlist-list', item: ({ instance, item, id }) => [ 'p-orderlist-item', diff --git a/components/lib/picklist/BasePickList.vue b/components/lib/picklist/BasePickList.vue index 1b9084e52..fcbfb162a 100644 --- a/components/lib/picklist/BasePickList.vue +++ b/components/lib/picklist/BasePickList.vue @@ -26,6 +26,10 @@ export default { type: Boolean, default: false }, + autoOptionFocus: { + type: Boolean, + default: false + }, responsive: { type: Boolean, default: true diff --git a/components/lib/picklist/PickList.d.ts b/components/lib/picklist/PickList.d.ts index a256fe2da..bd261c721 100755 --- a/components/lib/picklist/PickList.d.ts +++ b/components/lib/picklist/PickList.d.ts @@ -335,6 +335,11 @@ export interface PickListProps { * @defaultValue false */ metaKeySelection?: boolean | undefined; + /** + * Whether to focus on the first visible or selected element. + * @defaultValue false + */ + autoOptionFocus?: boolean | undefined; /** * Inline style of the the list element. */ diff --git a/components/lib/picklist/PickList.vue b/components/lib/picklist/PickList.vue index c641693e2..c8530bdc8 100755 --- a/components/lib/picklist/PickList.vue +++ b/components/lib/picklist/PickList.vue @@ -301,18 +301,19 @@ export default { return ObjectUtils.findIndexInList(item, this.d_selection[listIndex]) != -1; }, onListFocus(event, listType) { - const selectedFirstItem = DomHandler.findSingle(this.$refs[listType].$el, '[data-p-highlight="true"]') || DomHandler.findSingle(this.$refs[listType].$el, '[data-pc-section="item"]'); + this.focused[listType] = true; + const selectedFirstItem = this.autoOptionFocus + ? DomHandler.findSingle(this.$refs[listType].$el, '[data-p-highlight="true"]') || DomHandler.findSingle(this.$refs[listType].$el, '[data-pc-section="item"]') + : DomHandler.findSingle(this.$refs[listType].$el, '[data-p-highlight="true"]'); if (selectedFirstItem) { const findIndex = ObjectUtils.findIndexInList(selectedFirstItem, this.$refs[listType].$el.children); - - this.focused[listType] = true; - const index = this.focusedOptionIndex !== -1 ? this.focusedOptionIndex : selectedFirstItem ? findIndex : -1; this.changeFocusedOptionIndex(index, listType); - this.$emit('focus', event); } + + this.$emit('focus', event); }, onListBlur(event, listType) { this.focused[listType] = false; diff --git a/components/lib/picklist/style/PickListStyle.js b/components/lib/picklist/style/PickListStyle.js index 4f0545141..c6f849c66 100644 --- a/components/lib/picklist/style/PickListStyle.js +++ b/components/lib/picklist/style/PickListStyle.js @@ -46,11 +46,21 @@ const classes = { } ], sourceControls: 'p-picklist-buttons p-picklist-source-controls', - sourceWrapper: 'p-picklist-list-wrapper p-picklist-source-wrapper', + sourceWrapper: ({ instance }) => [ + '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: 'p-picklist-list-wrapper p-picklist-target-wrapper', + targetWrapper: ({ instance }) => [ + '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 }) => [