Fixed #5099 - autoOptionFocus property added to Input-like components
parent
c8609171c2
commit
54a7a4fb50
|
@ -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',
|
||||
|
|
|
@ -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',
|
||||
|
|
|
@ -26,6 +26,10 @@ export default {
|
|||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
autoOptionFocus: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
responsive: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
|
|
|
@ -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.
|
||||
*/
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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',
|
||||
|
|
|
@ -26,6 +26,10 @@ export default {
|
|||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
autoOptionFocus: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
responsive: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
|
|
|
@ -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.
|
||||
*/
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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 }) => [
|
||||
|
|
Loading…
Reference in New Issue