diff --git a/src/components/multiselect/MultiSelect.js b/src/components/multiselect/MultiSelect.js
index 2306ee2998..a48b4a05e3 100644
--- a/src/components/multiselect/MultiSelect.js
+++ b/src/components/multiselect/MultiSelect.js
@@ -21,6 +21,7 @@ export class MultiSelect extends Component {
defaultLabel: 'Choose',
disabled: false,
filter: false,
+ tabIndex: '0',
dataKey: null,
appendTo: null,
tooltip: null,
@@ -41,6 +42,7 @@ export class MultiSelect extends Component {
defaultLabel: PropTypes.string,
disabled: PropTypes.bool,
filter: PropTypes.bool,
+ tabIndex: PropTypes.string,
dataKey: PropTypes.string,
appendTo: PropTypes.object,
tooltip: PropTypes.string,
@@ -59,6 +61,7 @@ export class MultiSelect extends Component {
this.onClick = this.onClick.bind(this);
this.onPanelClick = this.onPanelClick.bind(this);
this.onOptionClick = this.onOptionClick.bind(this);
+ this.onOptionKeyDown = this.onOptionKeyDown.bind(this);
this.onFocus = this.onFocus.bind(this);
this.onBlur = this.onBlur.bind(this);
this.onFilter = this.onFilter.bind(this);
@@ -79,6 +82,59 @@ export class MultiSelect extends Component {
this.updateModel(event.originalEvent, newValue);
}
+ onOptionKeyDown(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.onOptionClick(event);
+ event.originalEvent.preventDefault();
+ break;
+
+ default:
+ break;
+ }
+ }
+
+ findNextItem(item) {
+ let nextItem = item.nextElementSibling;
+
+ if (nextItem)
+ return !DomHandler.hasClass(nextItem, 'p-multiselect-item') ? this.findNextItem(nextItem) : nextItem;
+ else
+ return null;
+ }
+
+ findPrevItem(item) {
+ let prevItem = item.previousElementSibling;
+
+ if (prevItem)
+ return !DomHandler.hasClass(prevItem, 'p-multiselect-item') ? this.findPrevItem(prevItem) : prevItem;
+ else
+ return null;
+ }
+
onClick() {
if(this.props.disabled) {
return;
@@ -364,12 +420,8 @@ export class MultiSelect extends Component {
}
render() {
- let className = classNames('p-multiselect p-component', this.props.className, {
- 'p-disabled': this.props.disabled
- });
-
+ let className = classNames('p-multiselect p-component', this.props.className, {'p-disabled': this.props.disabled});
let label = this.renderLabel();
-
let items = this.props.options;
if (items) {
@@ -380,8 +432,10 @@ export class MultiSelect extends Component {
items = items.map((option, index) => {
let optionLabel = this.getOptionLabel(option);
- return