diff --git a/react/src/lib/List/index.js b/react/src/lib/List/index.js
index 4a474285bf..cb36a92980 100644
--- a/react/src/lib/List/index.js
+++ b/react/src/lib/List/index.js
@@ -237,6 +237,7 @@ class List extends React.Component {
// Don't do anything if onSelect Event Handler is present
if (onSelect) {
return onSelect(e, {
+ keyboardKey: this.getValue(items, index, 'keyboard'),
eventKey: this.getValue(items, index, 'event'),
label,
value,
diff --git a/react/src/lib/Select/index.js b/react/src/lib/Select/index.js
index 1c87d35465..1606ea7993 100644
--- a/react/src/lib/Select/index.js
+++ b/react/src/lib/Select/index.js
@@ -42,7 +42,7 @@ class Select extends React.Component {
e.preventDefault();
const { selected, selectedIndex } = this.state;
const { isMulti } = this.props;
- const { value, label, eventKey } = opts;
+ const { value, label, eventKey, keyboardKey } = opts;
const isActive = find(selected, {value, label});
!isMulti && this.setState({ isOpen: false });
@@ -54,7 +54,7 @@ class Select extends React.Component {
selected: filter(selected, item =>
!isEqual(item, {value, label})
),
- selectedIndex: selectedIndex.filter(i => i !== eventKey)
+ selectedIndex: selectedIndex.filter(i => i !== keyboardKey)
});
} else if (!isActive && !isMulti) {
return this.setState({
@@ -64,7 +64,7 @@ class Select extends React.Component {
} else {
return this.setState({
selected: [...selected, {value, label}],
- selectedIndex: [...selectedIndex, eventKey]
+ selectedIndex: [...selectedIndex, keyboardKey]
});
}
}
@@ -228,4 +228,4 @@ Select.defaultProps = {
Select.displayName = 'Select';
-export default Select;
+export default Select;
diff --git a/react/src/lib/SelectOption/index.js b/react/src/lib/SelectOption/index.js
index 8310a3ab28..afdeb279f3 100644
--- a/react/src/lib/SelectOption/index.js
+++ b/react/src/lib/SelectOption/index.js
@@ -3,31 +3,17 @@
import React from 'react';
import ReactDOM from 'react-dom';
import PropTypes from 'prop-types';
-import {
- Checkbox,
- Icon,
- ListItem,
- ListItemSection,
-} from '@momentum-ui/react';
+import { Checkbox, Icon, ListItem, ListItemSection } from '@momentum-ui/react';
import SelectContext from '../SelectContext';
import ListContext from '../ListContext';
import { UIDConsumer } from 'react-uid';
class SelectOption extends React.Component {
render() {
- const {
- className,
- active,
- children,
- label,
- title,
- ...props
- } = this.props;
+ const { className, active, children, label, title, ...props } = this.props;
const separateChildren = (isMulti, cxtActive, uniqueId) => {
- return (
- isMulti
- ? (
+ return isMulti ? (
) : (
[
-
+
{label || children}
,
-
- {cxtActive && }
-
+
+ {cxtActive && }
+ ,
]
- ) );
+ );
};
+ const keySource = isMulti => `data-md-${isMulti ? 'keyboard' : 'event'}-key`;
+
return (
`md-select-option-${id}`}>
{id => (
@@ -53,17 +41,16 @@ class SelectOption extends React.Component {
{isMulti => (
{listContext => {
- const cxtActive = active
- || listContext
- && listContext.active
- && ReactDOM.findDOMNode(this)
- && ReactDOM.findDOMNode(this).attributes['data-md-event-key']
- && ReactDOM.findDOMNode(this).attributes['data-md-event-key'].value
- && listContext.active.includes(
- ReactDOM.findDOMNode(this)
- .attributes['data-md-event-key']
- .value
- );
+ const cxtActive =
+ active ||
+ (listContext &&
+ listContext.active &&
+ ReactDOM.findDOMNode(this) &&
+ ReactDOM.findDOMNode(this).attributes[keySource(isMulti)] &&
+ ReactDOM.findDOMNode(this).attributes[keySource(isMulti)].value &&
+ listContext.active.includes(
+ ReactDOM.findDOMNode(this).attributes[keySource(isMulti)].value
+ ));
const uniqueId = this.props.id || id;
@@ -112,7 +99,7 @@ SelectOption.defaultProps = {
id: '',
label: '',
title: '',
- value:'',
+ value: '',
};
SelectOption.displayName = 'SelectOption';