Fixed #5099 - autoOptionFocus property added to Input-like components

primefaces · Jan 17, 2024 · 54a7a4f · 54a7a4f
1 parent c860917
commit 54a7a4f
Show file tree

Hide file tree

Showing 10 changed files with 60 additions and 13 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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 }) => [