diff --git a/src/components/picklist/PickList.d.ts b/src/components/picklist/PickList.d.ts index c0eb6694b3..470cf0f3d1 100755 --- a/src/components/picklist/PickList.d.ts +++ b/src/components/picklist/PickList.d.ts @@ -14,6 +14,7 @@ interface PickListProps { showSourceControls?: boolean; showTargetControls?: boolean; metaKeySelection?: boolean; + tabIndex?: string; itemTemplate?(item: any): JSX.Element | undefined; onChange?(e: {event: Event, source: any, target: any}): void; onMoveToSource?(e: {originalEvent: Event, value: any}): void; diff --git a/src/components/picklist/PickList.js b/src/components/picklist/PickList.js index 3f9161f24f..97b7e8c739 100644 --- a/src/components/picklist/PickList.js +++ b/src/components/picklist/PickList.js @@ -23,6 +23,7 @@ export class PickList extends Component { showSourceControls: true, showTargetControls: true, metaKeySelection: true, + tabIndex: '0', itemTemplate: null, onChange: null, onMoveToSource: null, @@ -45,6 +46,7 @@ export class PickList extends Component { showSourceControls: PropTypes.bool, showTargetControls: PropTypes.bool, metaKeySelection: PropTypes.bool, + tabIndex: PropTypes.string, itemTemplate: PropTypes.func, onChange: PropTypes.func, onMoveToSource: PropTypes.func, @@ -191,13 +193,13 @@ export class PickList extends Component { onReorder={this.onSourceReorder} className="p-picklist-source-controls" />} this.sourceListElement = ReactDOM.findDOMNode(el)} list={this.props.source} selection={this.state.selectedItemsSource} onSelectionChange={(e) => this.setState({selectedItemsSource: e.value})} itemTemplate={this.props.itemTemplate} - header={this.props.sourceHeader} style={this.props.sourceStyle} className="p-picklist-source-wrapper" listClassName="p-picklist-source" metaKeySelection={this.props.metaKeySelection} /> + header={this.props.sourceHeader} style={this.props.sourceStyle} className="p-picklist-source-wrapper" listClassName="p-picklist-source" metaKeySelection={this.props.metaKeySelection} tabIndex={this.props.tabIndex} /> this.targetListElement = ReactDOM.findDOMNode(el)} list={this.props.target} selection={this.state.selectedItemsTarget} onSelectionChange={(e) => this.setState({selectedItemsTarget: e.value})} itemTemplate={this.props.itemTemplate} - header={this.props.targetHeader} style={this.props.targetStyle} className="p-picklist-target-wrapper" listClassName="p-picklist-targe" metaKeySelection={this.props.metaKeySelection}/> + header={this.props.targetHeader} style={this.props.targetStyle} className="p-picklist-target-wrapper" listClassName="p-picklist-targe" metaKeySelection={this.props.metaKeySelection} tabIndex={this.props.tabIndex}/> {this.props.showTargetControls && } diff --git a/src/components/picklist/PickListItem.js b/src/components/picklist/PickListItem.js index 59319d8135..31da1caf0e 100644 --- a/src/components/picklist/PickListItem.js +++ b/src/components/picklist/PickListItem.js @@ -9,7 +9,9 @@ export class PickListItem extends Component { className: null, template: null, selected: false, - onClick: null + tabIndex: null, + onClick: null, + onKeyDown: null } static propsTypes = { @@ -17,12 +19,15 @@ export class PickListItem extends Component { className: PropTypes.string, template: PropTypes.func, selected: PropTypes.bool, - onClick: PropTypes.func + tabIndex: PropTypes.string, + onClick: PropTypes.func, + onKeyDown: PropTypes.func } constructor() { super(); this.onClick = this.onClick.bind(this); + this.onKeyDown = this.onKeyDown.bind(this); } onClick(event) { @@ -30,7 +35,16 @@ export class PickListItem extends Component { this.props.onClick({ originalEvent: event, value: this.props.value - }) + }); + } + } + + onKeyDown(event) { + if (this.props.onKeyDown) { + this.props.onKeyDown({ + originalEvent: event, + value: this.props.value + }); } } @@ -38,7 +52,7 @@ export class PickListItem extends Component { let content = this.props.template ? this.props.template(this.props.value) : this.props.value; let className = classNames('p-picklist-item', this.props.className, {'p-highlight': this.props.selected}); - return
  • + return
  • {content}
  • ; } diff --git a/src/components/picklist/PickListSubList.js b/src/components/picklist/PickListSubList.js index f225f04cbe..806c8a13a0 100644 --- a/src/components/picklist/PickListSubList.js +++ b/src/components/picklist/PickListSubList.js @@ -3,6 +3,7 @@ import PropTypes from 'prop-types'; import React, { Component } from 'react'; import ObjectUtils from '../utils/ObjectUtils'; import { PickListItem } from './PickListItem'; +import DomHandler from '../utils/DomHandler'; export class PickListSubList extends Component { @@ -15,6 +16,7 @@ export class PickListSubList extends Component { style: null, showControls: true, metaKeySelection: true, + tabIndex: null, itemTemplate: null, onItemClick: null, onSelectionChange: null @@ -29,6 +31,7 @@ export class PickListSubList extends Component { style: PropTypes.object, showControls: PropTypes.bool, metaKeySelection: PropTypes.bool, + tabIndex: PropTypes.string, itemTemplate: PropTypes.func, onItemClick: PropTypes.func, onSelectionChange: PropTypes.func @@ -37,6 +40,7 @@ export class PickListSubList extends Component { constructor() { super(); this.onItemClick = this.onItemClick.bind(this); + this.onItemKeyDown = this.onItemKeyDown.bind(this); } onItemClick(event) { @@ -74,6 +78,59 @@ export class PickListSubList extends Component { }) } } + + onItemKeyDown(event) { + let listItem = event.originalEvent.currentTarget; + + switch(event.originalEvent.which) { + //down + case 40: + var nextItem = this.findNextItem(listItem); + if (nextItem) { + nextItem.focus(); + } + + event.originalEvent.preventDefault(); + break; + + //up + case 38: + var prevItem = this.findPrevItem(listItem); + if (prevItem) { + prevItem.focus(); + } + + event.originalEvent.preventDefault(); + break; + + //enter + case 13: + this.onItemClick(event); + event.originalEvent.preventDefault(); + break; + + default: + break; + } + } + + findNextItem(item) { + let nextItem = item.nextElementSibling; + + if (nextItem) + return !DomHandler.hasClass(nextItem, 'p-picklist-item') ? this.findNextItem(nextItem) : nextItem; + else + return null; + } + + findPrevItem(item) { + let prevItem = item.previousElementSibling; + + if (prevItem) + return !DomHandler.hasClass(prevItem, 'p-picklist-item') ? this.findPrevItem(prevItem) : prevItem; + else + return null; + } isSelected(item) { return ObjectUtils.findIndexInList(item, this.props.selection) !== -1; @@ -93,7 +150,8 @@ export class PickListSubList extends Component { if(this.props.list) { items = this.props.list.map((item, i) => { - return + return }); } diff --git a/src/showcase/picklist/PickListDemo.js b/src/showcase/picklist/PickListDemo.js index d2a96e9fba..1ad2b805e8 100644 --- a/src/showcase/picklist/PickListDemo.js +++ b/src/showcase/picklist/PickListDemo.js @@ -210,6 +210,12 @@ import {PickList} from 'primereact/picklist'; Defines how multiple items can be selected, 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. + + tabIndex + string + null + Index of the element in tabbing order. +