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