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

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',

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',

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

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.
      */

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;

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',

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

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.
      */

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;

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 }) => [